MooTools Fx.Transitions Demo
By Ryan Florence, published 2010-01-28
Part of the issue Migrated Articles From Original Site Structure..
Fx.Transitions
holds a handful of easing equations to give your animation just the right feel. You use them in two ways: either pass in the actual object reference + the easing or a string that represents it (I use the string method):
new Fx.Morph(el, {
transition: Fx.Transitions.Bounce.easeInOut
});
new Fx.Scroll(el, {
transition: Fx.Transitions.Bounce.easeIn
})
new Fx.Sort(el, {
transition: 'bounce:out'
});
new Fx.Tween(el, {
transition: 'sine:in:out'
});
The old demos for mootools 1.11 had a fun little widget that showcased the different javascript animation transitions available in MooTools Fx. I’ve recreated it here. Just click anywhere in the box to see the transition. Enjoy!