Navigating between view has been simplified. Simply tell Swapper which node is in the DOM and what to swap it with and away you go.

Swapper has tons of transition types (fading, sliding, scaling, rotating, cube transforms, Android-style, iPhone-style, etc).

swapper.js also provides convenient bindings for ZeptoJS and jQuery to make the development process as seamless as possible.

Download script (v1.0 minified)

View demo

// elem1 is jQuery/Zepto element in DOM
// elem2 is jQuery/Zepto element not in DOM yet
elem1.swapper(elem2);

elem1.swapper(elem2, 'slide-left');

Valid transitions are:

• fade
• scale-in
• scale-out
• rotate-left
• rotate-right
• cube-left
• cube-right
• swap-left
• swap-right
• explode-in
• explode-out
• slide-left
• slide-right
• slide-up
• slide-down

elem1.swapper(elem2, {
	transition : 'slide-left'  ,
	duration   : 300           , // in milliseconds
	easing     : 'ease-in-out'
});

Valid easings are:

• linear
• ease
• ease-in
• ease-out
• ease-in-out
• step-start
• step-end

Callbacks will be called when transitions are complete.

elem1.swapper(elem2, 'slide-left', function () {
	console.log('done!');
});

swapper.js has no external dependencies and will work perfectly fine as a standalone library.

// elem1 is an element in DOM
// elem2 is an element not in DOM yet

Swapper(elem1, elem2);

Swapper(elem1, elem2, 'slide-left');

Swapper(elem1, elem2, {
	transition : 'slide-left'  ,
	duration   : 300           ,
	easing     : 'ease-in-out'
});

Swapper(elem1, elem2, 'slide-left', function () {
	console.log('done!');
});