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.