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.

⚠️ Migrating from v1.x ? Make sure to read the changelog ⚠️

Main features

• 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.
• Easing functions: Use the built in functions or create your own Cubic Bézier curve easing.

Demos and examples

• CodePen demos and examples
• juliangarnier.com
• animejs.com
• kenzo.com/en/thejunglebook
• Stress test

Browser support

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

Usage

$ npm install animejs
# OR
$ bower install animejs

import anime from 'animejs'

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

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

Then start animating:

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', '#el 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

CSS

Any CSS properties can be animated:

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

Individual CSS transforms

CSS transforms can be animated individually:

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

➜ CSS Transforms example

JavaScript Object properties

Any Object property containing a numerical value can be animated:

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

DOM Attributes

Any DOM Attribute containing a numerical values can be animated:

<input value="0">

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

➜ DOM Attributes example

SVG Attributes

Any SVG Attribute containing a numerical values can be animated:

<svg width="128" height="128" viewBox="0 0 128 128">
  <polygon points="64 68.73508918222262 8.574 99.9935923731656 63.35810017508558 67.62284396863708 64 3.993592373165592 64.64189982491442 67.62284396863708 119.426 99.9935923731656"></polygon>
</svg>

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

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.

anime({
  targets: 'div',
  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

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

Single value

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', '50%'	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

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
});

From > To values

Force the animation to start at a certain value.

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

Function based values

Same as function based property parameters. Get different values for every target and property of the animation. The function accepts 3 arguments: target, index, targetsLength.

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(800, 1600); },
  delay: function() { return anime.random(0, 1000); }
});

➜ Function based value example

Keyframes

Keyframes are defined using an Array of property Object. Instance's duration is divided by the number of keyframes of each properties if not specified.

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](http://a