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.
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
});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 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 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 (/ˈæ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
Via npm
$ npm install animejs --save
or manual download.
import anime from 'animejs/lib/anime.es.js';
const anime = require('animejs');
Link anime.min.js in your HTML :
<script src="anime.min.js"></script>
anime({
targets: 'div',
translateX: 250,
rotate: '1turn',
backgroundColor: '#FFF',
duration: 800
});
| Chrome | Safari | IE / Edge | Firefox | Opera |
|---|---|---|---|---|
| 24+ | 8+ | 11+ | 32+ | 15+ |
Website | Documentation | Demos and examples | MIT License | © 2019 Julian Garnier.
FAQs
JavaScript animation engine
We found that animejs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.
Security News
Research
Socket researchers found a malicious Maven package impersonating the legitimate ‘XZ for Java’ library, introducing a backdoor for remote code execution.