Effects

The Fx object contains a family of classes all related to managing transitions. At it's heart, Fx.* let's you transition the properties of an element or several elements from one state to another across a duration you specify using a transition of your choice. Examples are always better to figure this stuff out, so let's just dive right in.

Here is the documentation for Fx.Base.js.

The Fx.Base class is the heart of all the Fx classes and it's rather basic. It's not something you'll be using directly, but whenever you want to author a new effect, you will probably want to extend the Fx.Base class. I won't go into a lot of detail on its functions and properties; if you want to write your own Fx class, look at the code, and look at how the other Fx.* classes use it.

Briefly, the Fx.Base class contains the following functions and properties that you'll typically reference and interact with whenever you use a class based on it.

Options:

onStart/onComplete/onCancel

Define functions to execute when the effect begins, ends, or is interrupted.

transition

The transition effect to use; see Fx.Transition below for details.

duration

The duration of the effect (in milliseconds)

unit

Defaults to "px"; other options include "em" for fonts and "%"

wait

boolean: to wait or not to wait for a current transition to end before running another of the same instance. defaults to true.

fps

the frames per second for the transition; default is 30

set()

Jumps to the value you specify; for instance, if you have an effect for width, you can call //set(100)// and the width of the element will be immediately set to 100 without a transition.

start(from, to) (used to be custom)

Note that from is optional. //.start()// is what you call to actually execute the effect, and you pass it the start and end values to transition from and to respectively. If you only pass in one value, the current state of the object will be used (i.e. if you called //.start(100)// on an Fx object that managed width, it would transition the element to 100px wide from whatever width it was at). Also note that //.custom()// is still there; it is deprecated and probably won't be around in Mootools 1.2.

stop()

Stops an effect transition at whatever point it's at currently.

I know that's not very helpful, but again, this is just the foundation class, all the fun stuff starts with the helper classes that implement Fx.Base.

Sorry, I'm not going to go into Fx.CSS much either. It's used by Fx.Style, Fx.Styles, Fx.Elements to parse css properties. It's worth mentioning here in the same way that Fx.Base is; your classes may want to make use of it. Rather than try and demonstrate this core functionality here, I'll instead recommend that if writing such classes are something you think you're up to, dig into Fx.Style, Fx.Styles, and Fx.Elements to see how it's used internally.

Here is the documentation for Fx.Style.js.

This is where Mootools really shines. Smoothly modifying the properties of an element is super simple. You have a couple of options on how to do it, once again, and they each have trade offs. I'll start with the method of creating an object for the effect:

/*	you should use "var exampleFx = ..." below
		but due to the way I execute code in these blocks,
		I declared this variable already */
exampleFx = new Fx.Style('fxTarget', 'opacity', {
	duration: 500, 
	transition: Fx.Transitions.Quart.easeInOut
});
/*	now we have an fx object, let's play with it:	*/
exampleFx.start(1,0); /*fade it out*/
 
exampleFx.start.pass([0,.5], exampleFx).delay(1000);
/*	wait a sec, bring it back to half way
		then wait another sec and bring it all the way back	*/
exampleFx.start.pass([.5,1], exampleFx).delay(2000);
/*	let's try from visible to hidden then back	*/
exampleFx.start.pass([1,0], exampleFx).delay(3000);
exampleFx.start.pass([0,1], exampleFx).delay(4000);

In the example above, I'm calling the start function which will alter the property I declared when I created the effect (in this instance, opacity). The effect will translate that property from the start to end values I pass in with the start function for the duration I specify (the default duration is 500ms).

Also, the example above shows me delaying other calls to the object to show it in use. See the sections on Native>Function for details on .pass and .delay. A nicer way to write the same thing as above using the Chain class would be:

exampleFx = new Fx.Style('fxTarget', 'opacity', {
	duration: 500, 
	transition: Fx.Transitions.Quart.easeInOut
});
/*	now we have an fx object, let's play with it:	*/
exampleFx.start(1,0).chain(
	exampleFx.start.pass([0,.5], exampleFx)
).chain(
	exampleFx.start.pass([.5,1], exampleFx)
).chain(
	exampleFx.start.pass([1,0], exampleFx)
).chain(
	exampleFx.start.pass([0,1], exampleFx)
);

If you're going to perform an effect over and over again, you'll save a bit of time by keeping the object around, and not just yours. Creating an effect object doesn't take a lot of CPU cyles, but it takes a few, and if you are going to do something numerous times, keeping the instance around will save some cycles.

In the example above I create an object called exampleFx and repeatedly execute it's .start method. I could create a new Fx.Style object for each section, but by re-using the same object repeatedly I save CPU cycles for the people viewing my pages.

Below, I'll show you an alternate method to create an effect that's a little easier to write, but really amounts to the same thing.

new Fx.Style('fxTarget','width').start(0,100);

new Fx.Style('fxTarget','height').start(0,100);

new Fx.Style('fxTarget','borderWidth').start(1,5);

new Fx.Style('fxTarget','margin').start(0,10);

new Fx.Style('fxTarget','padding').start(0,10);

note: The start method can also take as parameter just one number, in case you dont know exactly where to start from. In this case the starting position will be calculated automatically. Example:

new Fx.Style('fxTarget','margin').start(10);
//start wherever it is now (0) and go to 10

The other way to create these things is to call them directly on an element. Element.effect just returns an Fx.Style for that element. So the examples in the previous section could look like this:

$('fxTarget').effect('width').start(0,100);

$('fxTarget').effect('height').start(0,100);

$('fxTarget').effect('borderWidth').start(1,5);

$('fxTarget').effect('margin').start(0,10);

$('fxTarget').effect('padding').start(0,10);

As usual, you can configure the effect with numerous options, regardless of which syntax you use:

$('fxTarget').effect('height',{
	duration: 1000,
	transition: Fx.Transitions.Bounce.easeOut
}).start(0,100);

It seems like there should be more to it than this, but there isn't. Creating elegant effects driven applications still requires a lot of thought and careful planning, but the implementation aspect is pretty much done for you.

Here is the documentation for Fx.Styles.js

Fx.Styles is very similar to Fx.Style, except you can alter more than one property at once. You should use this over having two Fx.Style properties because each property will be altered in tandem with Fx.Styles. It's also less resource intensive.

var exampleFx = new Fx.Styles('fxTarget');
exampleFx.start({
	'width':[0,100],
	'height':[0,100]
});

var exampleFx = new Fx.Styles('fxTarget');
exampleFx.start({
	'opacity':[0,1],
	'padding':[0,10]
});

Just like Element.effect, .effects returns an Fx.Styles. So the examples in the previous section could look like this:

$('fxTarget').effects().start({
	'width':[0,100],
	'height':[0,100]
});

$('fxTarget').effects().start({
	'opacity':[0,1],
	'padding':[0,10]
});

As with .effect, you can configure the effect with numerous options, regardless of which syntax you use:

$('fxTarget').effects({
	duration: 1000,
	transition: Fx.Transitions.Bounce.easeOut
}).start({
	'width':[0,100],
	'height':[0,100]
});

Here is the documentation for Fx.Elements.js.

Fx.Elements allows you to apply any number of styles transitions to a selection of elements. Includes colors (must be in hex format). This Class is often implemented into others. For example, the Accordion effect applies numerous transition changes to numerous elements at once. Here's a simple example:

Here are three divs for this example:

var myElementsEffects = new Fx.Elements($$('div.exampleBar'));
myElementsEffects.start({
	'0': { /*	let's change the first element's opacity and width	*/
		'opacity': [0,1],
		'width': [100,200]
	},
	'1': { /*	and the second one's opacity	*/
		'opacity': [0.2, 0.5]
	},
	'2': { /*	and the third's height	*/
	'height': 40 /*	from whatever it's at now to 40	*/
	}
});

Here is the documentation for Fx.Scroll.js.

Smooth scrolling is pretty easy to manage with the Fx.Scroll class. You can scroll elements (like a div or a paragraph that has an overflow and thus a scroll bar) or the window.

Basic syntax:

new Fx.Scroll(element, options)

The options are the same as the Fx.Base options, and the element is any DOM element or the window.

var scrollExample = new Fx.Scroll($('scrollExample'));
scrollExample.scrollTo(0, 120);

var scrollExample = new Fx.Scroll($('scrollExample'));
scrollExample.toTop(); //go to the top

var scrollExample = new Fx.Scroll($('scrollExample'));
scrollExample.toBottom(); //to the bottom

There are also functions .toRight(), .toLeft(), .scrollTo(x,y) and .toElement() (which only works if the Fx target is the window).

Window example:

var winScroller = new Fx.Scroll(window);
/*	scroll to the top	*/
winScroller.toTop().chain(function (){
	/*	then back to here	*/
	winScroller.toElement('fxScrollWindowExample');
});

Here is the documentation for Fx.Slide.js.

The slide slides an element in horizontally or vertically, the contents will fold inside. Extends Fx.Base, inherits all its properties.

Think of this like an old school cash register. When you punch the keys, the value slides into view. The menu in this tutorial uses sliders to pop out on the right.

Note: In Mootools 1.0, you couldn't position the element in any way (if you needed to, you had to put it in a wrapper and position that). This has been fixed so this restriction no longer applies.

Options:

mode

set it to vertical or horizontal. Defaults to vertical.

and all the Fx.Base options

Here's a box with a box in it that we'll slide around:

First, we have to create the slider object: (note that I've already executed this code for you).

var mySlider = new Fx.Slide('sliderButton', {duration: 500});

Then we can play with it:

mySlider.toggle() //toggle the slider up and down.

mySlider.slideIn()

mySlider.slideOut()

mySlider.hide() //hides the element without a transition

mySlider.show() //shows the element without a transition

Fx.Transitions.js contains numerous transitions that are easier to demonstrate than they are to describe. Here is the documentation for Fx.Transitions.js.

Note that the docs link above illustrates each of these transitions like so:

So it's worth browsing the docs for this visual alone.

Drag the redbox and see the transition when you release it:

The old syntax for these easing formulas from Mootools 1.0 still exist and work (but are now deprecated and may not be around for Mootools 1.2), but 1.1 offers more detail and a new structure for the syntax. Each transition features three modes: easeIn, easeOut, and easeInOut. The only transition that doesn't have these variables is Linear. So, for example, Fx.Transitions.Quad.easeIn is how you'd refer to it.

Additionally, you can create a custom transition by passing in a numeric parameter:

//Elastic.easeOut with user-defined value for elasticity.
var myTransition = new Fx.Transition(Fx.Transitions.Elastic, 3);
new Fx.Style(element, 'margin', {transition: myTransition.easeOut});

Here is the documentation for Fx.Utils.js.

Fx.Utils contains helpers for Height, Width, and Opacity, and these are really only useful if you want to toggle these elements. What's more it only works in STRICT DOCTYPE. You should make use of these functions only if you really, really need to toggle. This document type isn't STRICT, so these examples are not functional.

exampleFx = new Fx.Height('fxTarget', {duration: 500});
exampleFx.toggle(); //hide it
exampleFx.toggle(); //bring it back

exampleFx = new Fx.Opacity('fxTarget', {duration: 500});
exampleFx.toggle() //hide it
exampleFx.toggle(); //bring it back