anime.js

JavaScript animation engine | animejs.com

Anime.js (/ˈæn.ə.meɪ/) 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 | Documentation | Demos and examples | Browser support

Getting started
Download

Via npm

bash
$ npm install animejs --save

or manual download.

Usage
ES6 modules

javascript
import anime from 'animejs/lib/anime.es.js';

CommonJS

javascript
const anime = require('animejs');

File include

Link anime.min.js in your HTML :

```html

```

Hello world

javascript
anime({
targets: 'div',
translateX: 250,
rotate: '1turn',
backgroundColor: '#FFF',
duration: 800
});

Documentation

• Targets


• Properties


• Property parameters


• Animation parameters


• Values


• Keyframes


• Staggering


• Timeline


• Controls


• Callbacks and promises


• SVG Animations


• Easing functions


• Helpers

Demos and examples

• CodePen demos and examples


• juliangarnier.com


• animejs.com


• Moving letters by @tobiasahlin


• Gradient topography animation by @crnacura


• Organic shape animations by @crnacura


• Pieces slider by @lmgonzalves


• Staggering animations


• Easings animations


• Sphere animation


• Layered animations


• anime.js logo animation

Browser support

| Chrome | Safari | IE / Edge | Firefox | Opera |
| --- | --- | --- | --- | --- |
| 24+ | 8+ | 11+ | 32+ | 15+ |

Website | Documentation | Demos and examples | MIT License | © 2019 Julian Garnier.