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!

Hi, I'm Ryan!

Location:
South Jordan, UT
Github:
rpflorence
Twitter:
ryanflorence
Freenode:
rpflo

About Me

I'm a front-end web developer from Salt Lake City, Utah and have been creating websites since the early 90's. I like making awesome user experiences and leaving behind maintainable code. I'm active in the JavaScript community writing plugins, contributing to popular JavaScript libraries, speaking at conferences & meet-ups, and writing about it on the web. I work as the JavaScript guy at Instructure.