UI navigation and transition utility
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demos
src
.gitignore
LICENSE.txt
README.md
build

README.md

swapper.js - UI navigation and transition utility

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.

Links

Download script (v1.0 minified)

View demo

Usage with ZeptoJS or jQuery

Make elements clickable

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

Transition types

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

Easing, transition durations

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

Callbacks will be called when transitions are complete.

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

Standalone Usage

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!');
});