animate

by bendc

bendc / animate

Simple animation library

422 Stars 22 Forks Last release: Not found MIT License 6 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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:
html

Start animating things:

javascript
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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.