The MooTools Fx
class is where the magic happens (or at least, one of the places where it happens). It contains the framework's animation effects logic that will help you transform CSS properties in a smooth and slick fashion. Before we get started with the fun stuff, let's go over the basics.
Declaring a new Fx
object follows the same syntax as declaring any other object in MooTools (like a new Event in Chapter 5). You create a new Fx
object using the following format:
var nameOfFxObject = new Fx([options]);
However, it's unlikely that you will use the Fx
class in the above manner, but rather, you'll use one of its extensions (Fx.Tween
or Fx.Morph)
.
Let's go over the options and properties you can use to define your animation effect.