Move makes animating the properties of DOM/SVG elements easy with a clean expressive API. Combine it with something to manage the timing between animations and you can really make your page dance.
If you animated the same property of the same element with 2 different instances of Move then only the second one will be visible. This may seem obvious and not a problem but if your triggering animations from async events then you will need to keep track of old instances so you can stop them before starting the next ones. If your using CSS transitions you don't need to worry about this. move.js is a good animation lib based on CSS transitions.
CSS animations should always be faster since the browser knows your intention and can make low level optimizations. In practice though I've found these optimizations aren't enough and you still need to tune your animations in some cases. For example you might reduce the overlap of an opacity animation with other animations. And Move makes this sort of thing a lot easier. But future browser improvements should reduce the need for tuning and Move users will miss out on this.
Animations don't have to be time based. Sometimes its nice base an animation on page scrolling or the progress of an HTTP request. This is also the feature which enables higher level orchestration tools.
Set prop to val.
move(box)
.set('margin-left', 200)
.run('1s')
Increment prop by val, where val is an Number (click several times).
move(box)
.add('margin-left', 200)
.run('1s')
Decrement prop by val, where val is an Number (click several times).
move(box)
.sub('margin-left', 100)
.run('1s')
Rotate by deg.
move(box)
.rotate(140)
.run('1s')
Set animation duration to n which is a Number or a string such as "4s".
move(box)
.set('background-color', 'blue')
.duration('2s')
.run()
Translate x and optionally y axis.
move(box)
.translate(100, 20)
.run('1s')
Translate x or y axis. Aliased by Move#translateX(n) and Move#translateY(n).
move(box)
.x(100)
.y(20)
.run('1s')
Skew x, and optionally y. Move#skewX(n) and Move#skewY(n) are also available.
move(box)
.skew(50)
.run('1s')
Scale the x, and optionally y axis. Move#scaleX(n) and Move#scaleY(n) are also available.
move(box)
.scale(3)
.run('1s')
The then() method triggers the animation to run. Optionally you can pass in a callback fn to call when the animation completes.
move(box)
.set('background-color', 'blue')
.duration('1s')
.then(function(){
move(box)
.set('background-color', 'aliceblue')
.run('1s')
})
Creates a DeferredMove which will be run when this move completes. Optionally you can pass in a Move instance and it will be run on completion of this animation.
var moveBack = move(boxs[0])
.duration(500)
.set('background-color', 'aliceblue')
.x(0)
move(boxs[0])
.duration('1s')
.set('background-color', 'blue')
.x(500)
.then(moveBack)
move(boxs[1])
.duration(500)
.set('background-color', 'blue')
.x(500)
.scale(.5)
.rotate(60)
.then()
.rotate(30)
.scale(2)
.set('border-radius', 5)
.set('opacity', 0)
.then()
.rotate(270)
.x(-500)
.set('background-color', 'aliceblue')
.set('border-radius', 0)
.set('opacity', 1)
Use the given easing fn. The default function is "linear". For a complete list of available functions see component/ease
boxs.forEach(function(box){
move(box)
.duration('1s')
.ease(box.textContent)
.x(400)
.then()
.x(-400)
})
render allows you to control the animation
var anim = move(box).set('d', '\
m 300,150 \
c 0,50 -50,50 -50,0 \
s -50,-50 -50,0 \
s -50,50 -50,0 \
s -50,-50 -50,0')
example.find('input').on('change', function(e){
anim.render(this.value/100)
})
Move handles SVG elements transparently. Just go ahead and use all the same methods.
move(box)
.set('d', '\
m 200 50 \
l 100 100 \
l -100 100 \
l -100 -100 \
l 100 -100')
.ease('out-sine')
.duration('.5s')
.then()
.set('d', '\
m 300,150 \
c 0,50 -50,50 -50,0 \
s -50,-50 -50,0 \
s -50,50 -50,0 \
s -50,-50 -50,0')
.then()
.set('d', '\
m 200 100 \
l 50 47 \
a 6 6 0 0 1 0 6 \
l -50 47 \
l 0 -100')