@immutabl3/anime v3.2.11

An updated anime implementation to address specific issues:

• 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

Getting started

Download

Via npm

$ npm install animejs --save

or manual download.

Usage

ES6 modules

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

CommonJS

const anime = require('animejs');

File include

Link anime.min.js in your HTML :

<script src="anime.min.js"></script>

Hello world

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

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