Move.js is a small JavaScript library making CSS3 backed animation extremely simple and elegant.

Move#set(prop, val) Set prop to val. Play move('#example-1 .box') .set('margin-left', 200) .end();

Move#add(prop, val) Increment prop by val, where val is an Number (click several times). Play move('#example-2 .box') .add('margin-left', 200) .end();

Move#sub(prop, val) Decrement prop by val, where val is an Number (click several times). Play move('#example-3 .box') .sub('margin-left', 100) .end();

Move#rotate(deg) Rotate by deg. Play move('#example-4 .box') .rotate(140) .end();

Move#duration(n) Set animation duration to n which is a Number or a string such as "4s". Play move('#example-5 .box') .set('background-color', 'blue') .duration('2s') .end();

Move#translate(x[, y]) Translate x and optionally y axis. Aliased as Move#to(x[, y]) . Play move('#example-6 .box') .translate(300, 80) .end();

Move#x(n) / Move#y(n) Translate x or y axis. Aliased by Move#translateX(n) and Move#translateY(n) . Play move('#example-7 .box') .x(300) .y(20) .end();

Move#skew(x[, y]) Skew x, and optionally y. Move#skewX(n) and Move#skewY(n) are also available. Play move('#example-8 .box') .x(300) .skew(50) .set('height', 20) .end();

Move#scale(x[, y]) Scale the x, and optionally y axis. Move#scaleX(n) and Move#scaleY(n) are also available. Play move('#example-9 .box') .scale(3) .end();

Move#ease(fn) Use the given easing fn . Play default in out in-out snap (0,1,1,0) move('#example-10 .box1').x(400).end(); move('#example-10 .box2').ease('in').x(400).end(); move('#example-10 .box3').ease('out').x(400).end(); move('#example-10 .box4').ease('in-out').x(400).end(); move('#example-10 .box5').ease('snap').x(400).end(); move('#example-10 .box6').ease('cubic-bezier(0,1,1,0)').x(400).end(); setTimeout(function(){ move('#example-10 .box1').x(0).end(); move('#example-10 .box2').x(0).end(); move('#example-10 .box3').x(0).end(); move('#example-10 .box4').x(0).end(); move('#example-10 .box5').x(0).end(); move('#example-10 .box6').x(0).end(); }, 1200);

Move#end([fn]) The end() method triggers the animation to play, optionally invoking the callback fn when complete. Play move('#example-11 .box') .set('background-color', 'red') .duration(1000) .end(function(){ move('#example-11 .box') .set('background-color', 'white') .end(); });

Move#delay(n) Set animation delay to n which is a Number or a string such as "4s". Play move('#example-12 .box') .set('background-color', 'blue') .delay('2s') .end();

Move#then([fn]) Defer an action such as invoking a fn, end() ing the given Move instance, or returning a clone for chaining. The Move#pop() method is used to return the current Move instance's parent in the chain. Play var moveBack = move('#example-13 .box') .set('background-color', 'white') .x(0); move('#example-13 .box') .set('background-color', 'red') .x(500) .then(moveBack) .end(); move('#example-13 .box2') .set('background-color', 'red') .x(500) .scale(.5) .rotate(60) .then() .rotate(30) .scale(1.5) .set('border-radius', 5) .set('background-color', 'white') .then() .set('opacity', 0) .pop() .pop() .end();

move.select(selector) This function is used throughout move to select elements. For example if we wanted to utilize jQuery, we could re-define this function as shown below. move.select = function(selector){ return $(selector).get(0); };

move.defaults Defaults used throughout Move, simply re-define to apply a new default. move.defaults = { duration: 500 };

move.ease Easing function map, used by Move#ease() to allow for move('foo').ease('in') etc. move.ease = { 'in': 'ease-in' , 'out': 'ease-out' , 'in-out': 'ease-in-out' , 'snap': 'cubic-bezier(0,1,.5,1)' };