In the last MooTools tutorial we saw how easy it is to add event handlers and use the built in effects. This time we will
take it a bit further and work with some custom effects. Sometimes the built in effects dont always meet the requirements of a particular
site or we want a bit fancier javascipt effect for a particular situation. For these such cases, MooTools makes it super easy to put together
a custom effect.

We are going to start out by using one of the new features in MooTools 1.2. Every element now has it’s own instance of the Tween and Morph classes built in. I’ll explain both of them and we’ll see a few examples along the way. First we will start with tween. Tween allows us to animate just about any CSS property there is: height, width, opacity, color, etc. Let’s start with opacity for a nice little fade effect:

Fade Out | Fade In

window.addEvent('domready', function() {
	$('clickMe1').addEvent('click', function(e) {
		$('fadeDiv').tween('opacity', 0);
		e.stop();
	});
	$('clickMe2').addEvent('click', function(e) {
		$('fadeDiv').tween('opacity', 1);
		e.stop();
	});
});

Lets up the ante a bit and see what magic we can do with the morph class. The morph class is similar to the tween class in that it lets us animate
CSS properties of any element. The difference is that morph will allow us to animate as many CSS properties as we want all simultaneously!
Try the demo below to see what we can do. So that you can see exactly what is happening I made this animation go pretty slowly (2 full seconds).

Morph | Morph Back

window.addEvent('domready', function() {
	$('morphDiv').set('morph', { duration: 2000 });
	$('clickMe3').addEvent('click', function(e) {
		$('morphDiv').morph({
			color: '#000',
			backgroundColor: '#fff',
			width: 400,
			height: 50,
			borderWidth: 10,
			borderColor: '#ff9900'
		});
		e.stop();
	});
	$('clickMe4').addEvent('click', function(e) {
		$('morphDiv').morph({
			color: '#fff',
			backgroundColor: '#000',
			width: 300,
			height: 200,
			borderWidth: 1,
			borderColor: '#ddd'
		});
		e.stop();
	});
});

The code above and in the previous tutorial should be enough to really kick start your creative side and make some nice effects to compliment any web site. More to come in the next installment…