Fx.Transitions

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

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

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});

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'});