bendc/animate

Animate

animate.js is a tiny library that helps you write smooth CSS-powered animations in JavaScript. See a quick demo of 500 elements animating at playground.deaxon.com/js/animate.

Usage

Include animate.min.js in your page:

<script src=animate.min.js></script>

Start animating things:

animate({
  el: "div",
  translateX: 100,
  opacity: .5,
  duration: 500,
  complete: function() { alert("Done!") }
});

API

animate requires a config object accepting the following options:

el

The elements you want to animate. el can be a:

• CSS selector
• DOM element
• array of DOM elements
• NodeList or HTMLCollection

duration

[Optional] The duration of your animation in milliseconds. Default: 400. ms will be added if you don't specify a unit.

delay

[Optional] The delay before your animation starts in milliseconds. Default: 0. ms will be added if you don't specify a unit.

easing

[Optional] The animation curve (CSS keyword or cubic-bezier). Default: ease.

complete

[Optional] A function called at the end of the animation. Inside the function, this refers to the DOM element that has finished animating.

animatable properties

• opacity
• translateX
• translateY
• translateZ
• scaleX
• scaleY
• scaleZ
• rotateX
• rotateY
• rotateZ
• skewX
• skewY
• perspective

You can also use the shortcut transform functions translate, scale and rotate when the same value should be applied to X and Y:

translate: 100 // same as translateX: 100, translateY: 100

If you don't specify a unit, px will be added to translate-related and perspective functions and deg to rotate-related functions.