Lightweight Pure JavaScript Animation Library – animate.js

Category: Animation , Javascript | January 27, 2015
Author: bendc
Views Total: 2,989
Official Page: Go to website
Last Update: January 27, 2015
License: MIT


Lightweight Pure JavaScript Animation Library – animate.js


animate.js is a lightweight, stand-alone JavaScript library which enables you to apply smooth CSS3 powered animations (e.g. rotate, scale, skew, etc) to any DOM elements.

How to use it:

Load the minified version of animate.js into your document.

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

Basic usage:


  // The elements you want to animate. 
  el: "div",

  // The duration of your animation in milliseconds
  duration: 500,

  // The animation curve (CSS keyword or cubic-bezier). 
  easing: "ease",

  // The delay before your animation starts in milliseconds.
  delay: 0,

  // A function called at the end of the animation. 
  complete: function() { alert("Done!") }

  // Custom animations
  opacity: null
  translateX: null
  translateY: null
  translateZ: null
  scaleX: null
  scaleY: null
  scaleZ: null
  rotateX: null
  rotateY: null
  rotateZ: null
  skewX: null
  skewY: null
  perspective:: null


You Might Be Interested In:

Leave a Reply