Documentation

Class: Animate

ML. Animate

new Animate(el [, settings])

  • Easily animate CSS values. credit
  • The following easing options are available: linear, elastic, quad, quint, circ, back or bounce.
  • You can animate relative values by doing +25 or -25 for a value. Which will take the current property value and increase or decrease the property balue by 25 (see demo).
  • The to menthod is used to animate css values and override global configuration.
  • The delay method is used to delay the animation from occuring.
  • See it in action + some notes! 😀
Parameters:
Name Type Argument Description
el HTMLElement

Element to animate.
settings Object <optional>

Global configuration settings.

Properties
Name Type Argument Default Description
duration Number <optional>
 200

The duration of the animation, in ms.
easing String <optional>
 linear

Type of animation (bounce, elastic, etc..), defaults to linear
Example
// Global configuration
var settings = {duration: 500, easing: 'bounce'};
var animation = new ML.Animate(ML.El.$q('#el'), settings);

animation.to({ width: 100 }, {}, function() {
 console.log('animation complete');
})

Methods

delay(time)

Delays animating the element.

Parameters:
Name Type Description
time Number

The amount of time to delay the animation, in ms.

to(props [, settings] [, cb])

Animate element.

Parameters:
Name Type Argument Description
props Object

CSS properties to animate.
settings Object <optional>

Override Global Configuration settings.

Properties
Name Type Argument Default Description
duration Number <optional>
 200

The duration of the animation, defaults to 400ms.
easing String <optional>
 linear

Type of animation (bounce, elastic, etc..), defaults to linear
cb function <optional>

Callback function.