Lightweight JavaScript Animation Engine – anime.js

Preview:

Description:

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

API.

// play the animation
myAnimation.play();
// pause the animation
myAnimation.pause();
// restart the animation
myAnimation.restart();
// advance in the animation
myAnimation.seek();

Helpers.

// Return an array of all active animations objects
anime.list;
// 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
anime.easings;
// Remove one or multiple targets from the animation.
// Will remove all divs with the class '.item-2'
anime.remove('.el-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);

Changelog:

v3.2.0 (04/28/2020)

• Add matrix and matrix3d parameters to allow the use of matrix values in CSS Transforms
• Change steps easing behaviour to match jump-start CSS timing function
• Fix (again) a bug where the animation will “flick” on reverse

v3.1.0 (07/27/2019)

• Add support for values with exponent
• Easing functions refactoring + added Bounce easing
• Bug fixes

v3.0.1 (01/17/2019)

• Direction parameter is now properly changed when animation reverse

01/12/2019

• Fix change callbacks

06/18/2018

• v2.2.0