Using MooTools for animation timings

Warning This article was written over six months ago, and may contain outdated information.

In my previous post, A MooTools Effects quickstart guide, I wrote a very simple and basic introduction to using the JavaScript framework to add animation effects to your website.

The popularity of the post took me by surprise, and showed me that there’s a demand for quick and easy tutorials on the subject; so I’ve decided to write a follow‐up, dealing with animation timings.

Please note: for the purposes of this tutorial I’m using inline JavaScript to call these functions; I urge you to consider other methods when writing for your own websites. Also, I’m learning the framework myself, so don’t hesitate to point out if there’s something I’ve got wrong or is unclear.

The first step is to sequence two animations, the second to begin when the first ends. Start by creating a div, as in the first tutorial. I’m going to use the following code to modify the div, by first increasing the height to 100px, then the width to 100px:

function fourthFunction() {
	var growDiv = new Fx.Style($('the_first_div'),
	'height', {duration: 2000})
	.addEvent('onComplete', function() {
		var expandDiv = new Fx.Style($('the_first_div'),
		'width', {duration: 2000});

At first the function works in the same way as the first example from my previous post; the difference is that I’ve added a second function with the Events class (in line 2). Using the onComplete event, I can call another function when the first ends, as demonstrated in Example One.

I can use another event, onStart, to get two different events running simultaneously; in this case, I’m going to increase the width of the div, then produce an alert box to let you know I’m doing it:

function fifthFunction() {
	var growDiv = new Fx.Style($('the_second_div'),
	'height', {duration: 1000}).addEvent('onStart', function() {
		alert("It's started...");

You can see this in action in Example Two.

If you want to use more than one or two events at the same time, it’s much more convenient to use the Chain class. With this you can set up all the functions in advance, then each one will be executed in turn as you call the callChain method; you can add delays to each iteration of callChain so that the next one is only called after a set period of time. In this example I’m going to increase height, wait two seconds, increase width, wait two seconds and display an alert:

function sixthFunction() {
	var x = new Chain();
	var one = function(){
		var growDiv = new Fx.Style($('the_first_div'),
		'height', {duration: 1000});
	var two = function(){
		var growDiv = new Fx.Style($('the_first_div'),
		'width', {duration: 1000});
	var three = function() { alert("And we're done!"); };
	x.callChain.delay(2000, x);
	x.callChain.delay(4000, x);

Example Three shows this working.

Hopefully these very basic functions have shown you some possibilities of what you can do with MooTools; you can, of course, combine the Chain and Events classes for even more power. I strongly advise you to read the Mootorial to get the most out of it.

3 comments on
“Using MooTools for animation timings”

  1. Hi, I’m doing this, but how can you interrupt the event fired “onComplete” so that if the user clicks on something else causing an animation, it halts the event that was fired?

  2. Hi,

    I am working on a small project using mootools, which im finding is great, but i have 1 problem (vaguely related to this topic)

    I have 5 boxes which are div elements and i cant figure for the life of me how to move them.

    what currently happens is you click on 1 box, and the other ones fade till they are invisible, and id like to be able to move the remaining one to a different area on the screen

    do you have any idea?



  3. Thank you for the great article. Ideal for beginners.