30 days of MooTools is a collection of tutorials to learn to use the MooTools javascrit library, first published in 2008 by ConsiderOpen.
The lessons are actually 23, as they where interrupted after this day.
As the original site is currently offline, the tutorials have been collected using the Wayback Machine to make them available to everyone interested in learning to use MooTools.
The tutorials are based on MooTools 1.2 so some parts could be deprecated and they should be updated and expanded based on the new MooTools versions.
The copyright (and gratitude) for the original lessons is hold by ConsiderOpen.
Idea Paolo Manganiello. Licence CC 3.0.
If you haven’t already, be sure and check out the rest of the Mootools 1.2 tutorials in our 30 days series.
Today, we are going continue exploring the Fx section of the library. First, we will learn how to use Fx.Morph (which essentially lets you tween multiple style properties), then we are going check out some of the Fx options that apply to both Fx.Tween and Fx.Morph, finally we will see how to use Fx events like “onComplete” and “onStart.” With these options and events, we will gain finer control over animated transitions.
Initiating a new morph looks a lot like creating a new tween, except you have to account for multiple style properties.
//first, lets throw our element into a var
var morphElement = $('morph_element');
//now, we create our morph
var morphObject = new Fx.Morph(morphElement);
//now we can set the style properties just like Fx.Tween
//except now we can set multiple style properties
morphObject.set({
'width': 100,
'height': 100,
'background-color': '#eeeeee'
});
//we can also start our morph like we would start a tween
//except we can now input multiple style properties
morphObject.start({
'width': 300,
'height': 300,
'background-color': '#d3715c'
});
And that is all there is to creating, setting and starting a morph.
To set this up proper, we should create our variables, separate out our functions and create a few events to control the whole thing:
var morphSet = function(){
//now we can set the style properties just like Fx.Tween
//except now we can set multiple style properties
this.set({
'width': 100,
'height': 100,
'background-color': '#eeeeee'
});
}
var morphStart = function(){
//we can also start out morph like we would start a tween
//except we can now input multiple style properties
this.start({
'width': 300,
'height': 300,
'background-color': '#d3715c'
});
}
var morphReset = function(){
//set the values back to start
this.set({
'width': 0,
'height': 0,
'background-color': '#ffffff'
});
}
window.addEvent('domready', function() {
//first, lets throw our element into a var
var morphElement = $('morph_element');
//now, we create our morph
var morphObject = new Fx.Morph(morphElement);
//here we add the click event to the buttons
//and we bind morphObject and the function
//allowing us to use "this" above
$('morph_set').addEvent('click', morphSet.bind(morphObject));
$('morph_start').addEvent('click', morphStart.bind(morphObject));
$('morph_reset').addEvent('click', morphReset.bind(morphObject));
});
<div id="morph_element"></div> <button id="morph_set">Set</button> <button id="morph_start">Start</button> <button id="morph_reset">reset</button>
The following options are accepted by both Fx.Tween and Fx.Morph. They are simple to implement and give you a ton of control over your effects. To set these options, use the following syntax:
//set up your tween or morph
//then just set up your options between the { }
var morphObject = new Fx.Morph(morphElement, {
//first state the name of the option
//place a :
//then define your option
duration: 'long',
transition: 'sine:in'
});
This option determines the frames per second of the animation. The default is 50, and it will accept numbers and variables that contain numbers
//set up your tween or morph
//then just set up your options between the { }
var morphObject = new Fx.Morph(morphElement, {
fps: 60
});
//or
var framesPerSecond = 60;
var tweenObject = new Fx.Tween(tweenElement, {
fps: framesPerSecond
});
This option sets the number unit. For example, do you want ‘100′ to mean px, % or ems?
//set up your tween or morph
//then just set up your options between the { }
var morphObject = new Fx.Morph(morphElement, {
unit: '%'
});
Link provides a way for you to manage multiple calls to start an effect. For example, if you have a mouseover effect, do you want it to start over each time the user hovers? Or, if a person mouses over the object twice, should it ignore the second call to start or should it chain them up and start a second time once it finishes the first round? Link has three settings:
//set up your tween or morph
//then just set up your options between the { }
var morphObject = new Fx.Morph(morphElement, {
link: 'chain'
});
Duration lets you define how long the animation will take. Duration is not the same thing as speed, so if you want an object to move 100px in a duration of 1 second, it will go slower than an object moving 1000px in 1 second. You can input a number (measured in milliseconds), a variable containing a number, or one of three shortcuts:
//set up your tween or morph
//then just set up your options between the { }
var morphObject = new Fx.Morph(morphElement, {
duration: 'long'
});
//or
var morphObject = new Fx.Morph(morphElement, {
duration: 1000
});
The last option, transition, gives you the ability to determine the transition type. For example, should it be a smooth transition or should it start out slowly then speed up toward the end. Check out these examples of the transitions available with the Mootools core library:
var tweenObject = new Fx.Tween(tweenElement, {
transition: 'quad:in'
});
Note: the first transition bar fires a red highlight effect on start and an orange highlight effect on complete. Check out how to use Fx events below.
The 30 transition types above break down into 10 sets:
Each set has three options:
The Fx event give you the opportunity to fire some code at different points throughout the animation effect. This can be very useful for creating user feedback and gives you yet another level of control over your tweens and morphs:
When building a tween or a morph, you can set set up one of these events just like you would an option, except instead of a value, you give it a function:
//first we pass the new Fx.Tween to a variable
//then we define the element to tween
quadIn = new Fx.Tween(quadIn, {
//here are some options
link: 'cancel',
transition: ‘quad:in’,
//here are some events
onStart: function(passes_tween_element){
//these event will pass the tween object
//so here we are applying the "highlight" effect
//when the animation starts
passes_tween_element.highlight('#C54641');
},
//notice how the commas are consistent
//between every option and event
//and NO COMMA AFTER THE LAST option or event
onComplete: function(passes_tween_element){
//and here we apply the highlight effect on complete
passes_tween_element.highlight('#C54641');
}
});
To generate the transition code above, we can reuse our functions in a way we haven’t seen in this series before. All of the transition elements above use two functions, one to tween out on mouse enter and one to tween back on mouse leave:
//this is the function we use on mouse enter, tweens width to 700px
var enterFunction = function() {
this.start('width', '700px');
}
//this is the function we use on mouse leave, tweens width back to 300px
var leaveFunction = function() {
this.start('width', '300px');
}
window.addEvent('domready', function() {
//here we create throw some elements into vars
var quadIn = $('quadin');
var quadOut = $('quadout');
var quadInOut = $('quadinout');
//then we create three tween elements, one for each var above
quadIn = new Fx.Tween(quadIn, {
link: 'cancel',
transition: Fx.Transitions.Quad.easeIn,
onStart: function(passes_tween_element){
passes_tween_element.highlight('#C54641');
},
onComplete: function(passes_tween_element){
passes_tween_element.highlight('#E67F0E');
}
});
quadOut = new Fx.Tween(quadOut, {
link: 'cancel',
transition: 'quad:out'
});
quadInOut = new Fx.Tween(quadInOut, {
link: 'cancel',
transition: 'quad:in:out'
});
//now we add the mouse enter and mouse leave events
//notice the use of .addEvents
//this works just like .addEvent
//except you can add multiple events using the pattern below
$('quadin').addEvents({
//first, you say what kind of event, place event type inside 'single quotes'
//then place a :
//finally you state your function
//in this case, its a function that binds to the tween
'mouseenter': enterFunction.bind(quadIn),
'mouseleave': leaveFunction.bind(quadIn)
});
$('quadout').addEvents({
//notice how we reuse the same functions here
'mouseenter': enterFunction.bind(quadOut),
'mouseleave': leaveFunction.bind(quadOut)
});
$('quadinout').addEvents({
//we also use those same functions here
//but each time they apply to an event on a different element
//and bind to a different tween
'mouseenter': enterFunction.bind(quadInOut),
'mouseleave': leaveFunction.bind(quadInOut)
});
});
You can gain even finer grained control over your effects with the tools in the Fx library. Be sure to read over the Fx section in the docs, as well as tween, morph and transitions
Day 12 - Drag and Drop with Drag.Move