https://animejs.com/

 
Documentation Examples Download v3.0.0
[icon-githu] GitHub [icon-codep] CodePen [icon-docs] Docs 
[icon-twitt] Twitter

Anime.js (/'aen.@.meI/) is a lightweight JavaScript animation library
with a simple, yet powerful API.
It works with CSS properties, SVG, DOM attributes and JavaScript
Objects.

Getting started

Staggering

Follow through animations made easy.

[icon-stagg] forward [icon-stagg] from index [icon-stagg] from center
[icon-stagg] easing [icon-stagg] reversed [icon-stagg] ripple

Anime's built-in staggering system makes complex follow through and
overlapping animations simple. It can be used on both timings and
properties.

Learn more about staggering

Layered CSS transforms

One element is all you need.

translateX
translateY
rotate
scale

Animate multiple CSS transforms properties with different timings
simultaneously on a single HTML element.

Learn more about keyframes

Controls and callbacks

Timing is everything.

[999                 ]
animation begin loop 1 begin
change begin
change complete
loop 1 complete
reverse loop 2 begin
change begin
change complete
loop 2 complete
reverse loop 3 begin
change begin
change complete
loop 3 complete animation complete
delay
end-delay
change

Play, pause, control, reverse and trigger events in sync using the
complete built-in callbacks and controls functions.

Learn more about callbacks

Animate anything

HTML, JS, CSS, SVG.

[icon-html] html [icon-js] js [icon-css] css [icon-svg] svg

Anime.js works with anything web. CSS, SVG, DOM attributes and
JavaScript Objects: animate everything with a single unified API.

Learn more about animatable properties

Getting started

Resources and documentation.

Download

  * GitHub project page
  * Source
  * ES6 Module
  * Minified ES5
  * Issues
  * Releases

Documentation

  * Targets
  * Properties
  * Property parameters
  * Animation parameters
  * Values
  * Keyframes
  * Stagering
  * Timeline
  * Controls
  * Callbacks and promises
  * SVG Animations
  * Easing functions
  * Helpers

Examples

  * CodePen collection
  * juliangarnier.com
  * animejs.com
  * Moving letters
  * Gradient topography
  * Organic shape
  * Pieces slider
  * Staggering animations
  * Easings animations
  * Sphere animation
  * Layered animations
  * anime.js logo animation

[anime-mini] Documentation Examples Download v3.0.0

v3.0.0

 | 

MIT License

 | 

2016 - 2019

 | 

(c) Julian Garnier