$3

- seek to 0 or initial state did not set initial state or fire updates. code was commented out to allow this, but side effects are currently unknown
- centralization of requestAnimationFrame calls weren't exposed to sync with other calls. anime no longer starts itself; it needs to be ticked by an outside requestAnimationFrame loop (by importing engine)
- object mutations were deoptimizing several key processes in Safari, causing slowdowns and hiccups. these were fixed by using better defaults and pulling out object creation
- reduce loops were causing general deoptimizing in browsers, seemingly randomly. these reduces were to perform array flattening (now replaced with .flat()) and sorting and have been replaced or removed
- functional loops (e.g. forEach), though nice, were creating functions-in-loops deeply. these have been addressed where possible to avoid function creation and reduce spikes in garbage collection
- initialization of many animations was very slow. the central anime call and other encapsulations have been turned into pure functions and/or classes
- substituted Map & Set where possible to reduce loop work-arounds/indexOf/includes checks
- heavier parts of the library can now be tree shaked when not imported/used
- general modernization of the library

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

$3

Via npm

``bash
$ npm install animejs --save
`

or manual download.

$3

#### 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

`

$3

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