Anime.js
106kb / ~36kb gzA flexible JavaScript animation library that animates CSS, SVG, and JavaScript objects with one API.
See It in Action
Smart stagger patterns, spring physics, and JS object animation — things CSS can't touch.
Toast notifications slide in with staggered spring easing — a real UI pattern powered by anime.js stagger().
What is Anime.js?
Anime.js is a JavaScript animation library that lets you animate almost anything on the web — CSS properties, SVG elements, DOM attributes, and plain JavaScript objects — all with a single, consistent API.
Version 4 introduced spring physics for natural-feeling motion, smart stagger patterns that cascade animations across groups of elements, and a timeline system for choreographing multi-step sequences. It works with any framework or with vanilla JS.
When to Use Anime.js
How Anime.js Compares
Both are full-featured animation libraries. Anime.js v4 is an all-in-one bundle (106kb min) while GSAP uses a smaller core (72kb min) plus opt-in plugins. Anime.js has a simpler API with no licensing complexity — GSAP requires a paid license for some business uses.
CSS is simpler for basic transitions. Anime.js wins when you need JS-driven logic, stagger patterns, spring physics, or animating values CSS cannot access like JS objects.
Motion (formerly Framer Motion) is built for React with a declarative API and gesture support. Anime.js is framework-agnostic and works anywhere with vanilla JS.
Get Started with Anime.js
npm install animejsyarn add animejs<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bundles/anime.umd.min.js"></script>import { animate, stagger } from 'animejs';
// Animate elements
animate('.box', {
translateX: 250,
rotate: '1turn',
duration: 800,
delay: stagger(100),
ease: 'outElastic(1, 0.5)'
});