sans-serif   serif

«

MooTools Fx.Transitions Demo

January 28, 2010

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!

Related Posts:

Comments

Leave a Reply

 

Comments RSS