JavaScript animation effects have come a long way with the help of frameworks like MooTools that allow you to perform very fine-tuned, slick animations that rival the likes of Adobe Flash.
MooTools allows you to smoothly transition a CSS property from one value to another. For example, if you would like to transition the width of an element from 100px to 200px, or the color from #ffffff to #000000, you can.
The term "tween" comes from the animation industry; it is when the animator fades a frame into the picture while fading out the existing frame, giving the appearance of a smooth and seamless transition between the two frames.
Fx.Tween
is a class extension of Fx
that deals with animating one CSS property value into another. We'll explore just how cool Fx.Tween
is with an example.