====== Fx.Transitions ====== Fx.Transitions.js contains numerous transitions that are easier to demonstrate than they are to describe. Here is the [[http://docs.mootools.net/Fx/Fx.Transitions|documentation for Fx.Transitions.js]]. Drag the redbox and see the transition when you release it:

Transition:
Duration:

Each transition features three modes: //easeIn//, //easeOut//, and //easeInOut//. So, for example, //Fx.Transitions.Quad.easeIn// is how you'd refer to it. The only transition that doesn't have these variables is //Linear//. 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.Tween(element, {transition: myTransition.easeOut});

===== Fx.Transitions Shorthands ===== You can also refer to these transitions with a shorthand that's a little easier to remember and type:


//Fx.Transitions.Bounce.easeIn
new Fx.Tween(element, {transition: 'bounce:in'});
//Fx.Transitions.Sine.easeOut
new Fx.Tween(element, {transition: 'sine:out'});
//Fx.Transitions.Elastic.easeInOut
new Fx.Tween(element, {transition: 'elastic:in:out'});