Need help with animate?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

bendc
423 Stars 23 Forks MIT License 6 Commits 2 Opened issues

Description

Simple animation library

Services available

!
?

Need anything else?

Contributors list

No Data

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.