A MooTools Effects quickstart guide

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

Update: This is an old post and the information contained in it may be out of date. I don’t use MooTools much any more, so please don’t expect that any of this information is still relevant.

MooTools is a neat little JavaScript framework which grew out of the Moo.fx library. It’s a quick and easy way to add dynamism to your site, from AJAX to animation (that doesn’t seem much alphabetically, I know).

Despite having extensive documentation, however, I felt it was lacking a ‘quickstart’ tutorial – so I decided to write one. This one, in fact. Let me just apologise in advance for any confusion that may arise from this tutorial; I’m not used to writing them, and my JavaScript is a little rusty so I may get some terminology wrong. Don’t hesitate to correct me if you spot any errors.

The first step is to download Mootools. The download page lets you choose which components you want to use, to save from downloading one huge document for every project. For this tutorial, you’ll need to highlight Fx.Style, Fx.Styles and Fx.Elements from the Effects category. All the dependent components will be highlighted automatically.

Choosing the right components for MooTools

Then download the .js file to your development area. Next you’ll need to link to that file in the <head> of your document:

<script type="text/javascript" src="mootools.js"></script>

Next, create a <div> in your test page with an id of ‘the_first_div’:

#the_first_div { border: 1px solid; height: 20px; width: 20px; }

And assign it the following styles:

#the_first_div {  border: 1px solid; height: 20px; width: 20px; }

Then put the following script into your document after you’ve called mootools.js:

function introFunction() {
	var growDiv = new Fx.Style($('the_first_div'),
	'width', {duration: 1000});
	growDiv.start(200);
}

The first line creates a new function which we’re going to call from an onclick event. The next line sets up the animation; we create a new variable called growDiv and then assign the Fx.Style effect to it. Fx.Style lets you change one DOM style property.

We then use three properties for Fx.Style: the first uses the dollar function as a shorthand to get the id of the HTML element we’re going to change, the next tells which DOM element we’re going to alter, and the third takes arguments which affect the transition; here we’re telling it to take place over one second.

The third line then commands the animation to begin, and in our example here instructs which width the <div> is going to resize to. Finally, we add an event trigger; in this case, a link which calls the function:

<p><a href="" onclick="introFunction(); return false;">Grow Me!</a></p>

Please note: I’m using inline JavaScript here purely for convenience in this tutorial. For your own pages you should consider instead using an external event handler.

Put all together, it should work like Example One.

What if we want to affect more than one DOM style property? Easy, we just use Fx.Styles and pass multiple values to it in the start property:

function secondFunction() {
	var expandDiv = new Fx.Styles($('the_second_div'),
	{duration: 1000});
	expandDiv.start({
	'height': 100, 'width': 100
	})
}

This selects the element by its id value; when called with the onclick, the multiple commands take place simultaneously, as shown in Example Two.

And if we want to animate multiple instances of an HTML element? We can use Fx.Elements to choose elements by tag name rather than id:

function thirdFunction() {
	var shrinkDivs = new Fx.Elements($$('div.tutorial'));
	shrinkDivs.start({
		'0': { 'width': 20 },
		'1': { 'height': 20, 'width': 20 }
	});
}

This uses the double dollar function to select elements (divs with a class of ‘tutorial’ in this case), then allows you to pass individual arguments to each of them by using its position in the array (0, 1, etc). See this in action at Example Three.

I hope this tutorial has been of use; I plan to return to the subject as I learn more about the framework myself!

Update: I’ve written a follow-up tutorial, Using MooTools for animation timings.

12 comments on
“A MooTools Effects quickstart guide”

  1. Hi Peter,

    Great tutorial – Just in time and thanks! I just found mootools and thought it was a great framework. When I tried to use it (I was trying to do the accordian – or the fx.height, whichever I could get to work) but could not get them going.

    I’m historically a C programmer, and can usually figure out javascript, but the documentation there is overwhelming for a js neophyte; I couldn’t get any of the examples I found to work; and the forums seems to frown upon ‘beginners’ (One poor guy got blasted for asking a question that someone finally took 2 seconds to answer).

    Here’s a project for you: Start a friendly forum for beginners! Then the ‘beginner’ community can help eachother. It appears to be a great framework, pity it can’t be made more inviting to a more general, albeit less js savvy audiance!

    Thanks again, I won’t give up on mootools and look forward to more!

  2. Very useful quick start – great icebreaker. Thanks heaps.

  3. thank you so much, a very tutorial for mootools that i can actually use. they should make their own tutorials so simple… !

    david bowman [July 15th, 2007, 02:14]

  4. …although i do have to wonder how many people will leave comments saying that the code you posted doesn’t work, as a result of your blog template converting inch and foot marks ( the ” and ‘ respectively) into proper typographer’s marks. we all know that coding environments are no place for proper typography… maybe there is a way to exclude code blocks from going through the typographer’s quotes transformation.

    david bowman [July 15th, 2007, 20:12]

  5. Thanks, David, that was really useful feedback; I’ve switched to pre-formatted code now, which should be easier to copy and use.

  6. Great tutorial for a complete beginner like me!
    Can I know how to make it so that when I click the link again it reverses the action?

  7. […] http://www.broken-links.com/2007/05/01/a-mootools-quickstart-guide/ […]

  8. Nice intro, we use Mootools fairly extensively at my agency. If you google Mootorial, you will find an extremely useful intro to practically all the Mootools classes.

  9. Yes guy field you are right , mootools is one of the greatest libraries I’ve used, so many features, especially form styling.

  10. Yeah this didn’t work for me at all. I must be missing something…

  11. you made it so easy. Thank you so much.

  12. Well, this was useful to learn about the changes since MooTools Version 1.2 (Fx.Style(s) becoming Fx.Tween/Fx.Morph), thank you! ;-)