anime.js
A lightweight JavaScript animation engine for CSS, SVG, the DOM and JS objects.
The sweet spot between hand-rolled CSS and a heavy motion framework — tiny, framework-agnostic and a joy for staggered, timeline-based motion. If you are not on React, this is my first reach.
anime.js is a small, dependency-free animation engine. It animates anything with a numeric value — CSS properties, SVG attributes, transforms, plain JS objects — and its timeline and stagger APIs make complex, choreographed motion genuinely pleasant to write. Because it is framework-agnostic, it drops into any project regardless of your stack.
Start with this
import anime from 'animejs';
anime({
targets: '.dot',
translateY: [
{ value: -40, duration: 500 },
{ value: 0, duration: 800 },
],
scale: [1, 1.4, 1],
delay: anime.stagger(80), // ripple across elements
easing: 'easeInOutSine',
loop: true,
});The take, for AI builders
For AI builders this is a great library to actually understand rather than copy blindly: the API is small enough to hold in your head, and the stagger/timeline model is where the magic lives. Ask your agent for an anime.js timeline and you get something you can read and tweak — unlike a wall of CSS keyframes. Reach for it when you want bespoke motion without pulling in a whole React-motion stack.
When to reach for it
✓ Good fit
- Vanilla / framework-agnostic projects that need real motion
- Staggered, timeline-choreographed animations
- SVG morphing and line-drawing effects
✕ Not for
- You are deep in React and want declarative, component-driven motion (use Motion)
- You only need a hover transition — plain CSS is lighter
Alternatives
Declarative and React-first; better when animation should live in your components.
More powerful for scroll-driven, production-grade timelines, and now fully free.
Related in Animation & motion
Animate.css
A cross-browser library of ready-to-use, just-add-a-class CSS animations like bounce, fade and zoom.
- css
- animation-library
- ready-made
The classic just-add-a-class CSS animation library. Ancient by web standards and still handy for a quick attention cue.
Visit ↗Animista
A web playground to tweak ready-made CSS animations and copy only the CSS you use.
- css
- animation-generator
- web-tool
Tweak ready-made CSS animations in the browser and copy only the keyframes you use. Great for grabbing a one-off effect without adding a dependency.
Visit ↗AnimXYZ
A composable CSS animation toolkit driven by custom properties, with Vue, React, SCSS and plain-CSS bindings.
- css
- composable-animation
- framework-agnostic
Compose CSS animations from utility attributes without writing keyframes — a neat mental model. Tiny, but development is quiet, so weigh maturity.
Visit ↗