Skip to content

xiuyetang/animate

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

JavaScript animation library

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%