Lightweight JavaScript Animation Engine – anime.js

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

Preview:

Lightweight JavaScript Animation Engine – anime.js

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.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

You Might Be Interested In:


Leave a Reply