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.
Welcome to Day 10 of 30 Days of Mootools Tutorials, today we are going to look at Fx.Tween. Just like all the other Mootools functions we have seen, these are very simple to use, but give you a lot power. Tween lets you add those great “flashy” effects - which translates to smooth animated transitions to improve your users’ experience.
We usually start out with “the basics,” but Mootools 1.2 just provides such fantastic shortcuts for tween and they are so easy to use that I couldn’t resist starting here.
A tween is a smooth transitions between two style property values. For example, with tween you can smoothly transition a div from “width: 100px” to “width: 300px.”
//create a new function
var tweenerFunction = function() {
//now select the element you want to tween
//then tack on .tween
//finally declare the style property and value you want to tween to
$('tweener').tween('width', '300px');
}
window.addEvent('domready', function() {
//here we add an event to a button to initiate the tween on click
//and we call our tween function
$('tween_button').addEvent('click', tweenerFunction);
});
Our html for the above would look something like this:
<div id="tweener"></div> <button id="tween_button">300 width</button>
This function lets you smoothly adjust an elements opacity. The set up can look pretty much like the previous example:
//create a new function
var tweenFadeFifty = function() {
//here you create your selector
//then you add .fade
//finally declare a value between 0 and 1 (0 being invisible, 1 being full visibility)
$('tweener').fade('.5');
}
window.addEvent('domready', function() {
//here we add an event to a button to initiate the tween on click
//and we call our tween function
$('tween_fade_fifty').addEvent('click', tweenFadeFifty);
});
<div id="tweener"> <button id="tween_fade_fifty">Fade to fifty percept opacity</button>
Highlight is a very targeted (and extremely useful) tween shortcut that provides two functions:
These are very useful for creating user feedback. For example, you can flash an element when something is selected, or you change a color then flash when it has been saved and closed. There are tons of options and it is very simple to use. For this example, lets create two divs and attach the two types of highlight:
//create a function
var tweenHighlight = function(event) {
//here we are using event.target, passed from the function
//this translates to "the target of the event"
//and since the effect applies to the same element that the event is attached to
//we don't have to create the selector again
//Note: addEvent will automatically pass the event object as a parameter
//to the function it calls... very handy
event.target.highlight('#eaea16');
}
//create a function
//you need to pass a parameter
//since this function is being called in an event
//the function will automatically be passed the event object
//and you can then refer to the element with .target
//(the target of the event)
var tweenHighlightChange = function(item) {
//here instead of a single color, we add a comma separated second
//this will set the first color, then transition to the second
item.target.highlight('#eaea16', '#333333');
}
window.addEvent('domready', function() {
$('tweener').addEvent('mouseover', tweenHighlight);
$('tweenerChange').addEvent('mouseover', tweenHighlightChange);
});
<div id="tweener"></div> <div id="tweenerChange"></div>
Here is a live example of some of the effect shortcuts. Try playing with the buttons in different orders and notice the behaivor:
var tweenerFunction = function() {
$('tweener').tween('width', '300px');
}
var tweenerGoBack = function() {
$('tweener').tween('width', '100px');
}
//.fade will also accept 'out' and 'in', equaling 0 and 1 respectively
var tweenFadeOut = function() {
$('tweener').fade('out');
}
var tweenFadeFifty = function() {
$('tweener').fade('.5');
}
var tweenFadeIn = function() {
$('tweener').fade('in');
}
var tweenHighlight = function(event) {
event.target.highlight('#eaea16');
}
window.addEvent('domready', function() {
$('tween_button').addEvent('click', tweenerFunction);
$('tween_reset').addEvent('click', tweenerGoBack);
$('tween_fade_out').addEvent('click', tweenFadeOut);
$('tween_fade_fifty').addEvent('click', tweenFadeFifty);
$('tween_fade_in').addEvent('click', tweenFadeIn);
$('tweener').addEvent('mouseover',tweenHighlight);
});
<div id="tweener"></div><br /> <button id="tween_button">300 width</button> <button id="tween_reset">100 width</button> <button id="tween_fade_out">Fade Out</button> <button id="tween_fade_fifty">Fade to 50% opacity</button> <button id="tween_fade_in">Fade In</button>
#tweener {
height: 100px;
width: 100px;
background-color: #3399CC;
}
Mouseover to see highlight type 1
If you want more flexibility and control over your tween effect, you are going to want to create a new tween instead of using the shortcuts. Notice the use of “new” to create a new instance of Fx.Tween:
window.addEvent('domready', function() {
//first we pass the element we want to tween to a var
var newTweenElement = $('newTween');
//now we create a new tween event, and pass that element as a parameter
var newTween = new Fx.Tween(newTweenElement);
});
<!-- here is the element we want to apply the tween to --> <div id="newTween"></div> <!-- here is a button that will come into play shortly --> <button id="netTween_set">Set</div>
Once you create a new tween from an element, you can easily set a style property with .set();. This takes place instanstly and works just like .setStyle();
var newTweenSet = function() {
//notice the use of "this"
//read on to learn how "this" is used
this.set('width', '300px');
}
As we learned before, we want to separate our functions outside of the domready event, but in this case we are going to create the tween inside the domready, then refer to it outside. We have already covered one way to pass parameters outside of the domready (by creating an anonymous function and passing a parameter) and today we are going to learn a Moo-better way to pass the tween object (not to say there are not times an anonymous function isn’t more appropriate).
With .bind();, we can make a parameter equal to “this” in the eyes of a given function:
//first we add a click event to the button we saw above
//then, instead of just calling the function
//we call the function and add ".bind()"
//we then place whatever we want to pass to the function
//now, inside the function "newTweenSet," "this" will refer to "newTween"
$('netTween_set').addEvent('click', newTweenSet.bind(newTween));
So if we look at the function above, “this” is now equivalent to saying “newTween” (which is our tween object).
Let’s put the whole thing together:
//here is our function
var newTweenSet = function() {
//since we used bind, "this" now refers to "newTween"
//so we are really saying
//newTween.set('width', '300px')
this.set('width', '300px');
}
window.addEvent('domready', function() {
//first we place our element into a var
var newTweenElement = $('newTween');
//then we create a new FX.Tween and assign it to its own var
var newTween = new Fx.Tween(newTweenElement);
//now we add our event and bind newTween and newTweenSet
$('netTween_set').addEvent('click', newTweenSet.bind(newTween));
});
Now that we have our tween object all set up, our function is outside of of the domready event and we learned out how to .set(); a style parameter, lets move onto the actual tweening. Starting a tween is very simple and similarly to .fade();, there are two ways to use .start();
//this will tween from the existing value of width to 300px
newTween.start('width', '300px');
//this one will first set the width to 100px, then tween to 300px
newTween.start('width', '100px', '300px');
Now, you can .start(); the tween from inside a function and use ‘this’ once you .bind() the function with “newTween.”
Although, there is still a lot to talk about regarding tweening effects. For example, if you want to “tween” multiple style properties at once, you would use .morph();. And you can use the transitions library to change the, well, transition. But this tutorial is already long enough, so we will leave those for another day.
As always, your best resource is the Mootools 1.2 docs.
We will continue looking at the Fx library, focusing on morph, as well as the Fx options and events.