MooTools

Class: Fx

Fx.Transitions overrides the base Fx constructor, and adds the possibility to use the transition option as string.

Transition option:

The equation to use for the effect. See Fx.Transitions. It accepts both a function (ex: Fx.Transitions.Sine.easeIn) or a string ('sine:in', 'bounce:out' or 'quad:in:out') that will map to Fx.Transitions.Sine.easeIn / Fx.Transitions.Bounce.easeOut / Fx.Transitions.Quad.easeInOut

Object: Fx.Transitions

A collection of tweening transitions for use with the Fx classes.

Examples:

$('myElement').set('tween', {transition: Fx.Transitions.Elastic.easeOut});
$('myElement').tween('margin-top', 100);
 

See also:

Note:

Since MooTools 1.3 this is a native JavaScript Object and not an instance of the deprecated Hash

Fx.Transitions Method: linear

Displays a linear transition.

Fx.Transitions Method: quad

Displays a quadratic transition. Must be used as Quad.easeIn or Quad.easeOut or Quad.easeInOut.

Fx.Transitions Method: cubic

Displays a cubicular transition. Must be used as Cubic.easeIn or Cubic.easeOut or Cubic.easeInOut.

Fx.Transitions Method: quart

Displays a quartetic transition. Must be used as Quart.easeIn or Quart.easeOut or Quart.easeInOut.

Fx.Transitions Method: quint

Displays a quintic transition. Must be used as Quint.easeIn or Quint.easeOut or Quint.easeInOut

Fx.Transitions Method: pow

Used to generate Quad, Cubic, Quart and Quint.

Note:

  • The default is p^6.

Fx.Transitions Method: expo

Displays a exponential transition. Must be used as Expo.easeIn or Expo.easeOut or Expo.easeInOut.

Fx.Transitions Method: circ

Displays a circular transition. Must be used as Circ.easeIn or Circ.easeOut or Circ.easeInOut.

Fx.Transitions Method: sine

Displays a sineousidal transition. Must be used as Sine.easeIn or Sine.easeOut or Sine.easeInOut.

Fx.Transitions Method: back

Makes the transition go back, then all forth. Must be used as Back.easeIn or Back.easeOut or Back.easeInOut.

Fx.Transitions Method: bounce

Makes the transition bouncy. Must be used as Bounce.easeIn or Bounce.easeOut or Bounce.easeInOut.

Fx.Transitions Method: elastic

Elastic curve. Must be used as Elastic.easeIn or Elastic.easeOut or Elastic.easeInOut

Class: Fx.Transition

This class is only useful for math geniuses who want to write their own easing equations. Returns an Fx transition function with 'easeIn', 'easeOut', and 'easeInOut' methods.

Syntax:

var myTransition = new Fx.Transition(transition[, params]);
 

Arguments:

  1. transition - (function) Can be a Fx.Transitions function or a user-provided function which will be extended with easing functions.
  2. params - (mixed, optional) Single value or an array for multiple values to pass as the second parameter for the transition function. A single value will be transformed to an array.

Returns:

  • (function) A function with easing functions.

Examples:

// Your own function. Here overshoot is bigger (now 1.3) when base -> 1 and base != 1.
var myTransition = new Fx.Transition(function(pos, x){
    return 1 - Math.pow(Math.abs(Math.log(pos) / Math.log(x && x[0] || Math.E)), pos);
}, 1.3);
 
var myFx = new Fx.Tween('myElement', {
    property: 'height',
    transition: myTransition.easeOut
}).start(30, 100);
 

See Also: