MooTools for Beginners Part 3 - Effects (Fx)
By Ryan Florence, published 2010-01-09
Part of the issue MooTools for Beginners (1.2).
Most people’s interest in a javascript framework lies in the animation effects. MooTools has the best. This article will not only show you the various ways to use effects, but will also talk a little about the philosophy of mootools.
All MooTools Effects Inherit the same stuff
Here I’ve used two different effects: Fx.Morph and Fx.Scroll.
Notice that the options passed to both effects are the same but just different values. MooTools has an inheritance system and both of these Classes (Fx.Morph, Fx.Scroll) extend Fx. Straight from the mootools docs:
Fx … provides the foundation for all custom Fx Classes. All of the other Fx Classes inherit from this one.
Since they extend Fx they get the same Events, Options, and Methods. In this example I used the same three options (transition, duration, link) and the same two events (start, complete) in both constructors:
// morph instance
var morph = new Fx.Morph('morph',{
transition: 'quart:out',
duration: 500,
link: 'chain',
onStart: function(){
message.set('html','Starting Morph').highlight();
},
onComplete: function(){
message.set('html','Morph complete').highlight();
}
});
// scroll instance
var scroll = new Fx.Scroll('scroll',{
transition: 'elastic:out',
duration: 2000,
link: 'cancel',
onStart: function(){
message.set('html','Scroll start').highlight();
},
onComplete: function(){
message.set('html','Scroll complete').highlight();
}
});
This coherence makes working with MooTools a pleasure.
Options options options!
The previous demo used the options transition, duration, and link. There are only two others: fps and unit. fps is simply the frames per second. It’s defaulted to 50, I rarely change this. However, unit is very useful and typically unknown. By default everything is in pixels, but you can change it to % and em, etc. I really like using %. In fact, the collapsable sidebar on this site uses %.
Events
Just like getting all the same options, every Fx.Whatever gets the same events: start, complete, cancel, chainComplete. They are all pretty self explanatory except maybe that last one. If you’ve got the link option set to chain then when all effects have completed the chainComplete event will fire. The first shell in this article used both start and complete. There are a few ways to use this stuff:
var myFx = new Fx.Tween('someElement',{
onStart: function(){
// do something
}
});
// or ...
myFx.addEvent('start',function(){
// do something
});
// or ...
var doSomething = function(){
// do something
};
myFx.addEvent('start', doSomething); // can remove later
Methods
Last but not least, Fx has several methods, all self explanatory, as usual with mootools. Here’s a list of them all.
- start
- set
- cancel
- pause
- resume
And some sample code:
var myFx = new Fx.Tween('someElement');
myFx.start(property, from, to);
myFx.start(property, to); // from becomes current
myFx.start(to); // if `property` option is set
myFx.set(property, to); // no animation, immediately sets
myFx.cancel(); // effect currently running gets canceled for a new call to start
myFx.pause();
myFx.resume();
The coherent mootools api makes it pretty easy to learn new parts of the framework. If you know how to manage an effect, you know how to manage an AJAX request: you construct them the same, pass in some options, add events, and call methods. Then it becomes a matter of checking the docs (or even the source) for the options, events, and methods at your fingertips.
