MooTools for Beginners Part 2 - Instantiating Objects and Managing State
By Ryan Florence, published 2009-12-30
Part of the issue MooTools for Beginners (1.2).
In part one we made use of Element.tween. A lot of the mootools classes have what I call element shortcuts that look like $('el').tween(), .morph(), .load() etc. Instead of using these shortcuts you can create an instance of these classes in an object and open up a lot more control.
Instantiating the class as an object
Fx.Tween is a class that animates a css style of an element. To store an instance of the class in a variable we simply do
var myTween = new Fx.Tween('myElement')
Now myTween has a couple of methods attached to it: set and start. To call one of them we use:
var myTween.start('height',200)
This is one of the most basic principles of MooTools. Instantiate classes and then “manage state” as it were by calling methods and setting properties on those objects. Here’s a mooshell to show it in action (click the play button or result to execute the code.)
Options of a class
Fx.Tween takes two arguments in it’s “constructor”: the element to apply the effect to and then an options object: new Fx.Tween(element, options). The options object tells Fx.Tween how to behave. Objects in javascript are simply key:value pairs almost identical to css style definitions (be sure to omit the comma on the last key:value pair, IE doesn’t like it):
// JS
var someObject = {
'height': 100,
'width': 200
};
/* CSS */
div#awesome {
height: 100px;
width: 200px;
}
So the options object we passed to Fx.Tween could have been out in the wild and passed to the constructor like example 1, though example 2 is more common:
// Example 1
var options = {
property: 'height',
duration: 750,
transition: 'bounce:out'
};
var myTween = new Fx.Tween('myText', options);
// Example 2
var myTween = new Fx.Tween('myText',{
property: 'height',
duration: 750,
transition: 'bounce:out'
});
The docs do a great job of explaining all the options available in a particular class. We can actually change those options after we’ve created the class instance. I like the bounce effect when it grows, but I don’t like it so much when it shrinks. To change things on the fly let’s first pull those functions out of the event definitions and then we’ll change the transition in the ensuing grow and shrink functions.
Events
Very often you want to do something when an effect starts or finishes (or an ajax request is started or finished, etc.) MooTools has custom Events for this purpose. Fx.Tween inherits all of the events from Fx which include start and complete. Lets use a css class to change the color of the text when the textarea has focus, but only after the effect completes does it lose or add the color.
Edit: More on options of Fx.Tween
This article is intended to show some fundamental concepts with mootools, not so much about using Fx.Tween. However, I hate effects that you can break and that’s part of why I chose mootools in the first place, it’s animations are the best. So I think it’s worth talking a little more about the Fx.Tween class option link.
As Chris pointed out in the comments the first shell is easily broken by click-happy visitors. When the Fx method start is called before another call to start is finished it looks at the link option to decide what to do. By default, the link option in Fx is link: 'ignore'. The second shell uses link: 'cancel' which cancels the current animation and starts the new one. And finally the last shell uses link: 'chain', which waits for the first animation to finish and then fires the next one. It creates some absolute silliness if you go crazy.
