🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Animate.js is a tiny library that helps you write smooth CSS-powered animations in JavaScript.

Animation Core Java Script

Documentation

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.


You May Also Like