What is animejs?
Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes, and JavaScript Objects.
What are animejs's main functionalities?
Basic Animation
This feature allows you to animate basic properties like translation, rotation, and background color of a DOM element.
anime({
targets: 'div',
translateX: 250,
rotate: '1turn',
backgroundColor: '#FFF',
duration: 800
});
Timeline Control
Timelines allow you to create complex animation sequences with precise control over the timing of each animation.
var tl = anime.timeline({
easing: 'easeOutExpo',
duration: 750
});
tl.add({
targets: '.box',
translateX: 250
}).add({
targets: '.box',
translateY: 250,
offset: '-=500' // Starts 500ms before the previous animation ends
});
SVG Animations
Anime.js can animate SVG properties, allowing for intricate and visually appealing vector animations.
anime({
targets: 'path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay: function(el, i) { return i * 250 },
direction: 'alternate',
loop: true
});
Keyframes
Keyframes allow you to define multiple stages of an animation, giving you more control over the animation sequence.
anime({
targets: '.box',
keyframes: [
{translateX: 250},
{translateY: 250},
{translateX: 0},
{translateY: 0}
],
duration: 4000,
easing: 'easeOutElastic(1, .8)',
loop: true
});
Other packages similar to animejs
gsap
GSAP (GreenSock Animation Platform) is a powerful JavaScript library for creating high-performance animations. It offers more features and plugins compared to Anime.js, making it suitable for more complex animations.
velocity-animate
Velocity is an animation engine with the same API as jQuery's $.animate(). It is designed for fast performance and is a good alternative for those who are familiar with jQuery animations.
popmotion
Popmotion is a functional, flexible JavaScript animation library. It provides a more functional approach to animations compared to Anime.js, making it a good choice for developers who prefer functional programming paradigms.
[!IMPORTANT]
🎉 Anime.js V4 is now available in early access 🎉
After years in the making, Anime.js V4 is finally available in early access for my GitHub Sponsors!
anime.js
JavaScript animation engine | animejs.com
Anime.js (/ˈæn.ə.meɪ/
) is a lightweight JavaScript animation library with a simple, yet powerful API.
It works with CSS properties, SVG, DOM attributes and JavaScript Objects.
Getting started | Documentation | Demos and examples | Browser support
Getting started
Download
Via npm
$ npm install animejs --save
or manual download.
Usage
ES6 modules
import anime from 'animejs/lib/anime.es.js';
CommonJS
const anime = require('animejs');
File include
Link anime.min.js
in your HTML :
<script src="anime.min.js"></script>
Hello world
anime({
targets: 'div',
translateX: 250,
rotate: '1turn',
backgroundColor: '#FFF',
duration: 800
});
Browser support
Chrome | Safari | IE / Edge | Firefox | Opera |
---|
24+ | 8+ | 11+ | 32+ | 15+ |
![anime-js-v3-logo](https://github.com/juliangarnier/anime/raw/HEAD/documentation/assets/img/animejs-v3-logo-animation.gif)
Website | Documentation | Demos and examples | MIT License | © 2019 Julian Garnier.