Exploiting MooTools transitions

There is a nice class embedded in the MooTools core package, the Fx.Transitions. It is used to spice up the default animations in many different way. I won't go into details, there is a cool breakdown about the capabilities of the class.
I'd like to show you how you can pick any transition function and use them outside the Fx classes.
This approach can be handy if you need to trigger other functions or to work with the Canvas element, maybe update some non standard CSS properties.

The one line below returns a function that contains the easing equation.

Fx.Transitions.Circ.easeOut

To access the power of the Transitions functions, you need to pass a value, computed by the following formula:
CURRENT FRAME / MAX FRAMES

The transition class is intended to be used as a frame based helper tool. It expects 0 to 1 values. To convert back the returned values, just multiply them with 100. For example if you are creating a 50 step animation this is the way to go:

// x is the current frame
var val = Fx.Transitions.Circ.easeOut( x / 50 ) * 100;

Here is a small demonstration on JsFiddle.

Tibor Szász30 years old code addict

Exploiting MooTools transitions

Comments

Add new comment

Briefing

My startup

Topics

Friends

Feeling so social

Tags