anime.js 

Anime (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library. It works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects.

$3

* Keyframes: Chain multiple animation properties.
* Timeline: Synchronize multiple instances together.
* Playback controls: Play, pause, restart, seek animations or timelines.
* CSS transforms: Animate CSS transforms individually.
* Function based values: Multiple animated targets can have individual value.
* SVG Animations: Motion path, line drawing and morphing animations.
* Bézier curve easing: Use the built in functions or create your own Bézier curve easing.

$3

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

$3

| Chrome | Safari | IE / Edge | Firefox | Opera |
| --- | --- | --- | --- | --- |
| 24+ | 6+ | 10+ | 32+ | 15+ |

Usage

``bash
$ npm install animejs


OR


$ bower install animejs
`

`javascript
import anime from 'animejs'
`

Or manually download and link anime.min.js in your HTML:

`html

`

Then start animating:

`javascript
anime({
targets: 'div',
translateX: [
{ value: 100, duration: 1200 },
{ value: 0, duration: 800 }
],
rotate: '1turn',
backgroundColor: '#FFF',
duration: 2000,
loop: true
});
`

API

Targets

The targets property defines the elements or JS Objects to animate.

| Types | Examples
| --- | ---
| CSS Selectors | 'div', '.item', 'path'
| DOM Element | document.querySelector('.item')
| NodeList | document.querySelectorAll('.item')
| Object | {prop1: 100, prop2: 200}
| Array | ['div', '.item', domNode]

➜ Targets examples

Animatable properties

| Types | Examples
| --- | ---
| CSS | opacity, backgroundColor, fontSize ...
| Transforms | translateX, rotate, scale ...
| Object properties | Any Object property containing numerical values
| DOM attributes | Any DOM attributes containing numerical values
| SVG attributes | Any SVG attributes containing numerical values

➜ Animatable properties examples

$3

Any CSS properties can be animated:

`javascript
anime({
targets: 'div',
left: '80%', // Animate all divs left position to 80%
opacity: .8, // Animate all divs opacity to .8
backgroundColor: '#FFF' // Animate all divs background color to #FFF
});
`

➜ CSS properties example

$3

CSS transforms can be animated individually:

`javascript
anime({
targets: 'div',
translateX: 250, // Animate all divs translateX property to 250px
scale: 2, // Animate all divs scale to 1.5
rotate: '1turn' // Animate all divs rotation to 1 turn
});
`

➜ CSS Transforms example

$3

Any Object property containing a numerical value can be animated:

`javascript
var myObject = {
prop1: 0,
prop2: '0%'
}

anime({
targets: myObject,
prop1: 50, // Animate the 'prop1' property from myObject to 50
prop2: '100%' // Animate the 'prop2' property from myObject to 100%
});
`

➜ Object properties example

$3

Any DOM Attribute containing a numerical values can be animated:

`html

`

`javascript
anime({
targets: input,
value: 1000 // Animate the input value to 1000
round: 1 // Remove decimals by rounding the value
});
`

➜ DOM Attributes example

$3

Any SVG Attribute containing a numerical values can be animated:

`html



`

`javascript
anime({
targets: 'polygon',
points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96'
});
`

➜ SVG Attributes example

Property parameters

Defines duration, delay and easing for each property animations.

Can be set globally, or individually to each properties:

| Names | Defaults | Types | Info
| --- | --- | --- | ---
| duration | 1000 | number, function | millisecond
| delay | 0 | number, function | millisecond
| easing | 'easeOutElastic' | function | See Easing functions
| elasticity | 500 | number, function | Range [0 - 1000]
| round | false | number, boolean, function | Power of 10

`javascript
anime({
translateX: {
value: 250,
duration: 800
},
rotate: {
value: 360,
duration: 1800,
easing: 'easeInOutSine'
},
scale: {
value: 2,
duration: 1600,
delay: 800,
easing: 'easeInOutQuart'
},
delay: 250 // All properties except 'scale' inherit 250ms delay
});
`

➜ Property parameters examples

Function based property parameters

Get different property parameters for every target of the animation.

The function accepts 3 arguments: target, index, targetsLength.

`javascript
anime({
targets: 'div',
translateX: 100,
translateX: 250,
rotate: 180,
duration: function(target) {
// Duration based on every div 'data-duration' attribute
return target.getAttribute('data-duration');
},
delay: function(target, index) {
// 100ms delay multiplied by every div index, in ascending order
return index * 100;
},
elasticity: function(target, index, totalTargets) {
// Elasticity multiplied by every div index, in descending order
return 200 + ((totalTargets - index) * 200);
}
});
`

➜ Function based parameters examples

Animation parameters

Parameters relative to the animation to specify the direction, the number of loops or autoplay.

| Names | Defaults | Types
| --- | --- | ---
| loop | false | number, boolean
| direction | 'normal' | 'normal', 'reverse', 'alternate'
| autoplay | true | boolean

`javascript
anime({
targets: 'div',
translateX: 100,
duration: 2000,
loop: 3, // Play the animation 3 times
direction: 'reverse' // Play the animation in reverse
autoplay: false // Animation paused by default
});
`

➜ Animation parameters examples

Property values

$3

Defines the end value of the animation.

Start value is the original target value, or default transforms value.

| Types | Examples | Infos
| --- | --- | ---
| Number | 100, | Automatically add original or default unit if needed
| String | '10em', '1turn', 'M21 1v160' | Must contains at least one numerical value
| Relative values | '+=100px', '-=20em', '*=4' | Add, subtract or multiply the original property value
| Colors | '#FFF', 'rgb(255,0,0)', 'hsl(100, 20%, 80%)' | Accepts 3 or 6 hex digit, rgb, or hsl values

➜ Values examples

`javascript
anime({
targets: 'div',
translateX: 100, // Add 'px' by default (from 0px to 100px)
rotate: '1turn', // Use 'turn' as unit (from 0turn to 1turn)
scale: '=2', // Multiply the current scale value by 2 (from 1 to (1 2))
backgroundColor: '#FFF', // Animate the background color to #FFF (from 'rgb(0,0,0)' to 'rgb(255,255,255)')
duration: 1500
});
`

$3

Force the animation to start at a certain value.

`javascript
anime({
targets: 'div',
translateX: [100, 200], // Translate X from 100 to 200
rotate: ['.5turn', '1turn'], // Rotate from 180deg to 360deg
scale: ['*=2', 1], // Scale from 2 times the original value to 1,
backgroundColor: ['rgb(255,0,0)', '#FFF'], // Will transition the background color from red to white
duration: 1500
});
`

➜ Specific initial value example

$3

Same as function based property parameters.

Get different values for every target of the animation.

The function accepts 3 arguments: target, index, targetsLength.

`javascript
anime({
targets: 'div',
translateX: function(el) {
return el.getAttribute('data-x');
},
translateY: function(el, i) {
return 50 + (-50 * i);
},
scale: function(el, i, l) {
return (l - i) + .25;
},
rotate: function() { return anime.random(-360, 360); },
duration: function() { return anime.random(1200, 1800); },
duration: function() { return anime.random(800, 1600); },
delay: function() { return anime.random(0, 1000); }
});
`

➜ Function based value example

Keyframes

$3

Keyframes are defined using an Array of property Object.

Animation of multiple values played in a sequence:

`javascript
anime({
targets: 'div',
translateX: [
{ value: 80 },
{ value: 160 },
{ value: 250 }
],
translateY: [
{ value: -40 },
{ value: 40 },
{ value: 0 }
],
duration: 1500, // Duration will be divided by the number of keyframes of each properties, so 500ms each in this example
delay: 500 // Delay will be applied only at the first keyframe
});
`

➜ Basic keyframes example

$3

Use specific timing and easing functions for each keyframe:

`javascript
anime({
targets: 'div',
translateX: [
{ value: 250, duration: 1000, delay: 500, elasticity: 0 },
{ value: 0, duration: 1000, delay: 500, elasticity: 0 }
],
translateY: [
{ value: -40, duration: 500, elasticity: 100 },
{ value: 40, duration: 500, delay: 1000, elasticity: 100 },
{ value: 0, duration: 500, delay: 1000, elasticity: 100 }
],
scaleX: [
{ value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
{ value: 1, duration: 900, elasticity: 300 },
{ value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
{ value: 1, duration: 900, elasticity: 300 }
],
scaleY: [
{ value: [1.75, 1], duration: 500 },
{ value: 2, duration: 50, delay: 1000, easing: 'easeOutExpo' },
{ value: 1, duration: 450 },
{ value: 1.75, duration: 50, delay: 1000, easing: 'easeOutExpo' },
{ value: 1, duration: 450 }
]
});
`

➜ Specific keyframes properties example

Timeline

Synchronize animations together.

➜ Timeline examples

$3

`javascript
let myTimeline = anime.timeline();
`

A timeline accepts the same parameters as an animation: direction, loop and autoplay.

`javascript
var myTimeline = anime.timeline({
direction: 'alternate',
loop: 3,
autoplay: false
});
`

$3

Timeline has a .add() function that accepts an Array of animations:

`javascript
let myTimeline = anime.timeline();

myTimeline.add([
anime({
target: '.el-01',
translateX: 100
}),
anime({
target: '.el-02',
translateX: 100,
delay: 500
})
]);
`

Or

`javascript
var animation01 = anime({
target: '.el-01',
translateX: 100
});
var animation02 = anime({
target: '.el-02',
translateX: 100,
delay: 500
});

myTimeline.add([animation01, animation01]);
`

Access timeline children animations with myTimeline.children

Playback controls

Play, pause, restart, seek animations or timelines.

$3

`javascript
var playPauseAnim = anime({
targets: 'div',
translateX: 250,
delay: function(el, i, l) { return i * 100; },
direction: 'alternate',
loop: true,
autoplay: false // prevent the instance from playing
});

playPauseAnim.play(); // Manually play
playPauseAnim.pause(); // Manually pause
`

➜ Play / Pause example

$3

`javascript
var restartAnim = anime({
targets: 'div',
translateX: 250,
delay: function(el, i, l) { return i * 100; },
direction: 'alternate',
loop: true,
autoplay: false
});

restartAnim.restart(); // Restart the animation and reset the loop count / current direction
`

➜ Restart example

$3

Change animations or timelines current time.

`javascript
var seekAnim = anime({
targets: 'div',
translateX: 250,
delay: function(el, i, l) { return i * 100; },
elasticity: 200,
autoplay: false
});

seekAnim.seek(500); // Set the animation current time to 500ms
`

➜ Seek example

Callbacks

Execute a function at the beginning, during or when an animation or timeline is completed.

| Names | Types | Arguments | Info
| --- | --- | --- | ---
| update | function| animation Object | Called at time = 0
| begin | function | animation Object | Called after animation delay is over
| complete | function | animation Object | Called only after all the loops are completed

➜ Callbacks examples

$3

Get current animation time with myAnimation.currentTime, return value in ms.

Get current animation progress with myAnimation.progress, return value in %.

`javascript
var myAnimation = anime({
targets: '#callbacks .el',
translateX: 250,
delay: 1000,
update: function(anim) {
console.log(anim.currentTime + 'ms');
console.log(anim.progress + '%');
}
});
`

➜ Update example

$3

`javascript
var myAnimation = anime({
targets: '#begin .el',
translateX: 250,
delay: 1000,
begin: function(anim) {
console.log(anim.began); // true after 1000ms
}
});
`

begin() is not called if the animation is added to a timeline.

Check if the animation has begun with myAnimation.began, return true or false.

➜ Begin example

$3

`javascript
var myAnimation = anime({
targets: '#complete .el',
translateX: 250,
complete: function(anim) {
console.log(anim.completed);
}
});
`

complete() is not called if the animation is added to a timeline.

Check if the animation has finished with myAnimation.completed, return true or false.

➜ Complete example

SVG

$3

Translate and rotate DOM elements along an SVG path:

`javascript
// Create a path Object
var path = anime.path('#motionPath path');

var motionPath = anime({
targets: '#motionPath .el',
translateX: path('x'), // Follow the x values from the path Object
translateY: path('y'), // Follow the y values from the path Object
rotate: path('angle') // Follow the angle values from the path Object
});
`

➜ Motion path example

$3

Animate the transition between two SVG shapes:

`html



`

`javascript
var svgAttributes = anime({
targets: '.shape polygon',
points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96'
});
`

Shapes need to have the same number of points.

➜ Morphing example

$3

Line drawing animation of an SVG shape:

`javascript
anime({
targets: '.shape path',
strokeDashoffset: [anime.setDashoffset, 0]
});
`

➜ Line drawing example

Easing functions

The easing parameter can accept either a string or a custom Bézier curve coordinates (array).

| Types | Examples | Infos
| --- | --- | ---
| String | 'easeOutExpo' | Built in function names
| Array | [.91,-0.54,.29,1.56] | Custom Bézier curve coordinates ([x1, y1, x2, y2])

$3

Linear easing: 'linear'

Penner's equations:

| easeIn | easeOut | easeInOut
| --- | --- | ---
| easeInQuad | easeOutQuad | easeInOutQuad |
| easeInCubic | easeOutCubic | easeInOutCubic
| easeInQuart | easeOutQuart | easeInOutQuart
| easeInQuint | easeOutQuint | easeInOutQuint
| easeInSine | easeOutSine | easeInOutSine
| easeInExpo | easeOutExpo | easeInOutExpo
| easeInCirc | easeOutCirc | easeInOutCirc
| easeInBack | easeOutBack | easeInOutBack
| easeInElastic | easeOutElastic | easeInOutElastic

➜ Built in easing functions examples

Usage:

`javascript
anime({
targets: 'div',
translateX: 100,
easing: 'easeOutExpo' // Default 'easeOutElastic'
});
`

Elasticity of Elastic easings can be configured with the elasticity parameters:

`javascript
anime({
targets: 'div',
translateX: 100,
easing: 'easeOutElastic',
elasticity: 600 // Default 500, range [0-1000]
});
`

➜ Elasticity examples

$3

Define a Bézier curve with an Array of 4 coordinates:

`javascript
anime({
targets: 'div',
translateX: 100,
easing: [.91,-0.54,.29,1.56],
});
`

Custom Bézier curves coordinates can be generated here https://matthewlein.com/ceaser/

➜ Custom Bézier curves example

$3

Expand the built in easing functions from anime.easings.

`javascript
// Add custom function
anime.easings['myCustomEasingName'] = function(t) {
return Math.pow(Math.sin(t * 3), 3);
}

// Usage
anime({
targets: 'div',
translateX: 100,
easing: 'myCustomEasingName'
});

// add custom Bézier curve function
anime.easings['myCustomCurve'] = anime.bezier([.91,-0.54,.29,1.56]);

// Usage
anime({
targets: 'div',
translateX: 100,
easing: 'myCustomCurve'
});
`

➜ Custom easing functions example

Helpers

$3

Change all animations speed (from 0 to 1).

`javascript
anime.speed = .5; // Slow down all animations by half of their original speed
`

$3

Return an Array of all active Anime instances.

`javascript
anime.running;
`

$3

Remove one or multiple targets from the animation.

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

$3

Get current valid value from an element.

`javascript
anime.getValue('div', 'translateX'); // Return '100px'
`

$3

Create a path Function for motion path animation.

Accepts either a DOM node or CSS selector.

`javascript
var path = anime.path('svg path', 'translateX'); // Return path(attribute)
`

➜ Motion path example

$3

An helper for line drawing animation.

Sets the 'stroke-dasharray' to the total path length and return its value.

`javascript
anime({
targets: '.shape path',
strokeDashoffset: [anime.pathDashoffset, 0]
});
`

➜ Line drawing example

$3

Return the complete list of built in easing functions

`javascript
anime.easings;
`

$3

Return a custom Bézier curve easing function

`javascript
anime.bezier(x1, x2, y1, y2); // Return function(t)
`

$3

Create a timeline to synchronise other Anime instances.

`javascript
var timeline = anime.timeline();
timeline.add([instance1, instance2, ...]);
`

➜ Timeline examples

$3

Generate a random number between two numbers.

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

====

MIT License. © 2017 Julian Garnier.

Thanks to Animate Plus and Velocity that inspired anime.js` API, BezierEasing and jQuery UI for the easing system.