Animation Library
Shakes! is an Animations Plugin for Mootools.
Many javascript tools provide readymade/adhoc animations (like fold effect, zoom effect, etc). On the other hand Mootools provides a highly orthogonal API (Mootools Fx) that lets anyone create such effects from basic animation components, such as a tween. For e.g., a fold effect could be made from two tweens: one for the height of the element and another for the width.
Shakes! animation plugin is a layer above Mootools Fx library that lets you queue, loop and synchronize Mootools Fx effects naturally and almost declaratively.
Lets take a look at some simple animations:
Shrinkage
... it folds when it's cold!
The typical "fold" effect requires animating two properties: the width and the height. However, these have to animated in succession rather than together. We can achieve this with a simple piece of code, using the tween declaration:
var animation = $('animation-1').animate()
.tween('width', 50)
.tween('height', 50);
$('play-1').addEvent('click', function() {
animation.start();
});
Calls like 'tween' are henceforth called cogs.
Chaining
You can chain as many cogs as you want.
var animation2 = $('animation-2').animate()
.tween('width', 50)
.tween('height', 50)
.tween('background-color', '#00ff00')
.tween('background-color', '#0000ff');
$('play-2').addEvent('click', function() {
animation2.start();
});
Delays
Went by too fast ? You can also add delay cogs
var animation3 = $('animation-3').animate()
.tween('width', 50)
.delay(300)
.tween('height', 50)
.delay(300)
.tween('background-color', '#00ff00')
.delay(300)
.tween('background-color', '#0000ff')
.delay(300);
$('play-3').addEvent('click', function() {
animation3.start();
});
Morphing
To change multiple properties at once, use the morph cog
var animation4 = $('animation-4').animate()
.morph({'top':60, 'left': 60})
.delay(500)
.morph({'top':10, 'left': 10});
$('play-4').addEvent('click', function() {
animation4.start();
});
Repeating N times ...
You can repeat your animation any number of times
var animation5 = $('animation-5').animate()
.morph({'top':60, 'left': 60})
.delay(500)
.morph({'top':10, 'left': 10})
.repeat(3);
$('play-5').addEvent('click', function() {
animation5.start();
});
... or forever
Saying forever has never been this easy
var animation6 = $('animation-6').animate()
.morph({'top':60, 'left': 60})
.delay(500)
.morph({'top':10, 'left': 10})
.repeat();
$('play-6').addEvent('click', function() {
animation6.start();
});
Waiting for the Sun
You can wait on an event too ... in this case, we wait on a click event on the animated box.
var animation7 = $('animation-7').animate()
.morph({'top':60, 'left': 60})
.wait($('animation-7'), 'click')
.morph({'top':10, 'left': 10})
.wait($('animation-7'), 'click')
.repeat();
$('play-7').addEvent('click', function() {
animation7.start();
});
Blocks
The "scope" of a repeat is its containing block. We can use a .serial and .end pair to create a new block. This allows us to repeat specific parts of our animation.
var animation8 = $('animation-8').animate()
.serial()
.tween('height', 50)
.tween('height', 10)
.repeat(3)
.end()
.serial()
.tween('width', 50)
.tween('width', 10)
.repeat(3)
.end()
.repeat();
$('play-8').addEvent('click', function() {
animation8.start();
});
Parallel Blocks
A Parallel block executes all the containing blocks/cogs in parallel.
var animation9 = $('animation-9').animate()
.parallel()
.tween('height', 60)
.serial()
.delay(300)
.tween('left', 80, {
transition: 'bounce:out',
duration: 'normal'
})
.end()
.end();
$('play-9').addEvent('click', function() {
animation9.start();
});
Yes, the tween and morph cogs take an options hash as the third argument which is directly passed on to the Fx.Tween and Fx.Morph objects.
Anyway, there are a number of more features, both right now, and in development. Please check the source code, demos and watch this space for updates.