CSS3 animation framework for JavaScript (original) (raw)

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

move.version

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

      `

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