Lightweight JavaScript Animation Engine – anime.js

Category: Animation , Javascript , Recommended | January 17, 2019
Author: juliangarnier
Views Total: 4,014
Official Page: Go to website
Last Update: January 17, 2019
License: MIT


Lightweight JavaScript Animation Engine – anime.js


anime.js is a lightweight (~10kb minified) yet robust, high performance JavaScript animation library that works with CSS, Individual Transforms, SVG, DOM attributes and JS Objects.

Basic usage:

Include the core JavaScript library anime.js in the document and we’re ready to go.

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

Create a custom animation on a specified element using anime function.

var myAnimation = anime({
    targets: ['.el-1', '.el2'],
    // more options here

Full settings to help create custom animations.

// 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']
targets: ['.el-1', '.el2'],

// animaton duration in ms
duration: 1000,

// animation delay in ms
delay: 0,

// number or boolean
loop: false,

// autoplay on page load
autoplay: true,

// 'normal', 'reverse' or 'alternate'
direction: 'normal',

// easing function
easing: 'easeOutElastic',

// higher is stronger
elasticity: 400,

// number or boolean
round: false,

// callback functions
begin: undefined,
update: undefined,
complete: undefined


// play the animation;

// pause the animation

// restart the animation

// advance in the animation;


// Return an array of all active animations objects

// Change all animations speed (from 0 to 1).
// Will slow down all animations by half of their original speed
anime.speed = .5; 

// Return the complete list of anime.js easing functions

// Remove one or multiple targets from the animation.
// Will remove all divs with the class '.item-2'

// Get current valid value from an element.
// Will return '100px'
anime.getValue('div', 'translateX'); 

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


v3.0.1 (01/17/2019)

  • Direction parameter is now properly changed when animation reverse


  • Fix change callbacks


  • v2.2.0

You Might Be Interested In:

Leave a Reply