Me ɪ/) is a polyvalent yet Lightweight Javascript animation library. It works with CSS, Individual Transforms, SVG, DOM attributes and JS Objects.

Features

Examples and demos

Animation example

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

Review images

Live example on CodePen

Browser support

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

Quick start

npm install animejs or download

Then insert anime.min.js in your html:

Copy the code

API

targets

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

Names Defaults Types
delay 0 number.function (el, index, total)
duration 1000 number.function (el, index, total)
autoplay true boolean
loop false number.boolean
direction 'normal' 'normal'.'reverse'.'alternate'
easing 'easeOutElastic' console log anime.easings to get the complete functions list
elasticity 400 number (higher is stronger)
round false number.boolean
begin undefined function (animation)
update undefined function (animation)
complete undefined function (animation)

Specific animation parameters

Review images

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
});Copy the code

Live example on CodePen

Multiple timing values

Review images

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

Available function arguments:

Positions Names Infos
1 target The targeted element
2 index The target index (start at 0)
3 length of targets The total number of targets (start at 0)

Example:

Anime ({targets: 'div', translateX: '13.5rem', Scale: [.75,.9], Delay: function(el, index) {return index * 80; }, direction: 'alternate', loop: true });Copy the code

Live example on CodePen

List of valid animateable properties

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

Property values

Single value

Defines the end value of the animation.

Types Examples Infos
Number 100 Will use default units if possible
String '100rem' Will force the animation to use a specific value

Example:

anime({
  targets: 'div',
  translateX: '3rem',
  width: '100', // Will be converted to '100px'
});Copy the code

From To values

Defines the start and end values of the animation.

Example:

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

Specific target values

Review images

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

Available function arguments:

Positions Names Infos
1 target The targeted element
2 index The target index (start at 0)

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
  }
});Copy the code

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
  }
});Copy the code

Live example on CodePen

Playback controls

Review images

Play, pause, restart and seek the animation.

Names Infos Arguments
.play() Play the animation animation parameters object
.pause() Pause the animation none
.restart() Restart the animation animation parameters object
.seek() Advance in the animation a percentage, or an object {time: 1250} 
var myAnimation = anime({
  targets: 'div',
  translateX: 100,
  autoplay: false
});

myAnimation.play(); // Manually play the animationCopy the code

Live example on CodePen

Motion path

Review images

Animate the transforms properties along an SVG path.

var myPath = anime.path('path');

anime({
  targets: 'div',
  translateX: myPath,
  translateY: myPath,
  rotate: myPath
});Copy the code

Live example on CodePen

Helpers

anime.list

Return an array of all active animations objects

anime.speed = x

Change all animations speed (from 0 to 1).

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

anime.easings

Return the complete list of anime.js easing functions

anime.remove(target)

Remove one or multiple targets from the animation.

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

anime.getValue(target, property)

Get current valid value from an element.

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

anime.random(x,y)

Generate a random number between two numbers.

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

MIT License. © 2016 Julian Garnier.