Documentation

Class: Animate

ML. Animate

new Animate(el, props [, settings] [, cb])

  • 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).
  • See it in action + some notes!
Parameters:
Name Type Argument Description
el HTMLElement

Element to animate.
props Object

CSS properties to animate.
settings Object <optional>

Configuration settings.

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

The duration of the animation, defaults to 400ms.
delay Number <optional>
 13

The delay of the animation, defaults to 13.
relative Boolean <optional>
 true

Ability to override animating relative values.
easing String <optional>
 linear

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

Callback function.
Example
1
2
3
4
5
6

var props = {width: 100, height: 100};
var settings = {delay: 15, duration: 500, easing: 'bounce'};

new ML.Animate(ML.$('el'), props, settings, function() {
  alert('animation is complete');
});