Anime (/ˈæn.ə.meɪ/) is a flexible yet lightweight JavaScript animation library.
It works with CSS, Individual Transforms, SVG, DOM attributes and JS Objects.

Features

• Specific animation parameters
• Specific target values
• Multiple timing values
• Playback controls
• Motion path

Examples and demos

• CodePen demos and examples
• juliangarnier.com
• anime-js.com
• kenzo.com/en/thejunglebook
• Stress test

var myAnimation = anime({ targets: ['.blue', '.green'], translateX: '13rem', rotate: 180, borderRadius: 8, duration: 2000, loop: true });

Live example on CodePen

• Chrome
• Safari
• Opera
• Firefox
• IE 10+

npm install animejs / bower install animejs or download

Then insert anime.min.js in your html:

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

Or import it in your JavaScript

import anime from 'animejs'

Defines the elements or JS Objects to animate.

| Accept | Examples | --- | --- | --- | CSS Selectors | 'div','.thing','path' | DOM Element | document.querySelector('.thing') | Nodelist | document.querySelectorAll('.thing') | JavaScript Object | {prop1: 100, prop2: 200} | JavaScript Array | ['.thing-1', 'div']

Parameters can be set individually to properties by using an Object.

Specific property parameters are :

• value (required)
• delay
• duration
• easing

Example:

anime({ targets: 'div', translateX: '13rem', rotate: { value: 180, duration: 1500, easing: 'easeInOutQuad' }, scale: { value: 2, delay: 150, duration: 850, easing: 'easeInOutExpo', }, direction: 'alternate', loop: true });

Live example on CodePen

Delays and durations can be specific to each targeted elements by using a function.

Available function arguments:

Example:

anime({ targets: 'div', translateX: '13.5rem', scale: [.75, .9], delay: function(el, index) { return index * 80; }, direction: 'alternate', loop: true });

Live example on CodePen

Any property can be animated, as long as the property value contains at least one numerical value.

| Types | Examples | --- | --- | --- | CSS Properties | width, borderRadius, 'background-color' | Individual transforms | translateX, rotate, scaleY | SVG attributes | d, rx, transform | DOM attributes | value, volume | Object properties | any object property containing at least one number

Defines the end value of the animation.

Example:

.div { width: 20px; }

anime({ targets: 'div', translateX: '3rem', // Will translate the div from '0rem' to '3rem' width: '100', // Will be converted to '100px' because the width is '20px' in the CSS });

Defines the start and end values of the animation.

Example:

anime({ targets: 'div', translateX: [50, 250] // Will start at 50px and end at 250px });

Property values can be specific to each targeted elements by using a function.

Available function arguments:

Examples:

anime({ targets: 'div', translateX: function(el, index) { return anime.random(50, 100); // Will set a random value from 50 to 100 to each divs } });

Live example on CodePen

anime({ targets: 'path', strokeDashoffset: function(el) { var pathLength = el.getTotalLength(); return [pathLength, 0]; // Will use the exact path length for each targeted path elements } });

Live example on CodePen

Play, pause, restart and seek the animation.

var myAnimation = anime({ targets: 'div', translateX: 100, autoplay: false }); myAnimation.play(); // Manually play the animation

Live example on CodePen

Animate the transform properties along an SVG path by using the anime.path() Object.

Transforms compatible with a motion path:

Notes: IE cannot apply CSS transforms on SVG elements.

Example:

var myPath = anime.path('path'); anime({ targets: 'div', translateX: myPath, translateY: myPath, rotate: myPath });

Live example on CodePen

Animate any JS Object attribute.

Example:

var myObject = { one: 0, two: 2000 } var myAnimation = anime({ targets: myObject, one: 9999, two: 4200, duration: 5000, round: true, easing: 'linear', loop: true, update: function() { console.log(myObject); } });

Live example on CodePen

Return an array of all active animations objects

anime.list;

Change all animations speed (from 0 to 1).

anime.speed = .5; // Will slow down all animations by half of their original speed

Return the complete list of anime.js easing functions

anime.easings;

Remove one or multiple targets from the animation.

anime.remove('.item-2'); // Will remove all divs with the class '.item-2'

Get current valid value from an element.

anime.getValue('div', 'translateX'); // Will return '100px'

Generate a random number between two numbers.

anime.random(10, 40); // Will return a random number between 10 and 40

====

MIT License. © 2016 Julian Garnier.

Big thanks to Animate Plus and Velocity that inspired anime.js API, and jQuery UI from which the easing functions come from.