JavaScript animation engine – anime.js

How to create animations in JavaScript? It’s not that hard with right tools.

Anime.js – a JavaScript animation engine

Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It works with SVG, CSS properties, DOM attributes and JavaScript Objects. Cross-browser.

JavaScript animation engine - anime.js
JavaScript animation engine – anime.js

Setup


$ npm install animejs --save

Usage


// ES6 modules
import anime from 'animejs/lib/anime.es.js';

// Or CommonJS
const anime = require('anime');

// Sample animation 
anime({
  targets: 'div',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#fff',
  duration: 800
});

License: MIT

Homepage & docs

https://animejs.com

Docs

https://animejs.com/documentation

GitHub

https://github.com/juliangarnier/anime

See also

JavaScript SVG animation library – Vivus.js

Ladda – loading indicators for buttons

pagePiling.js – create scrolling pile of sections

Canvas based jQuery smoky backgrounds generator – waterpipe.js

Enjoy!