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});
		expandDiv.start(100);
		});
	growDiv.start(100);
}

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...");
	});
	growDiv.start(100);
};

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});
		growDiv.start(100);
	};
	var two = function(){
		var growDiv = new Fx.Style($('the_first_div'),
		'width', {duration: 1000});
		growDiv.start(100);
	};
	var three = function() { alert("And we're done!"); };
	x.chain(one);
	x.chain(two);
	x.chain(three);
	x.callChain();
	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.