Move.js

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

Examples

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

move.version

The library version in the form "MAJOR.MINOR.PATCH".

          move.version = "n.n.n";