Development · Website
Anime.js
Lightweight, modular JavaScript animation engine for CSS, SVG, and DOM elements
Anime.js is a lightweight JavaScript animation engine designed to animate DOM elements, CSS properties, SVG attributes, and JavaScript objects. It offers a modular architecture allowing developers to import only the tools they need, including timelines, scroll observers, drag interactions, and spring physics. It is widely used for creating performant, choreographed web animations without relying on heavy external dependencies.
What it's for
- Animate DOM elements, CSS properties, and SVG paths with timelines and keyframes
- Trigger and synchronize web animations based on scroll position thresholds
- Implement draggable UI components with spring physics and release easing
- Morph SVG shapes and animate elements along custom motion paths
Features
- Modular architecture with sub-packages like Timer, Draggable, Scroll, and Scope
- Timeline API for orchestrating and synchronizing sequential animations
- Scroll Observer API with multiple synchronization modes and thresholds
- Built-in SVG toolset for path drawing, shape morphing, and motion paths
- Draggable API with spring physics, snapping, and comprehensive callbacks
- Advanced staggering utility for values, timing, and timeline positions
- Responsive animations tied to media queries via Scope API
Pricing
Open source. Free and open source (MIT license, supported by sponsors)
Details
- Type
- Website
- Category
- Development
- Topic
- Animation Libraries
- Open source
- Yes
- Platforms
- Web, Code library
- For
- Front-end developers and web designers looking for a lightweight, versatile animation library
- Alternative to
- GSAP, Framer Motion, Velocity.js
- Tags
- animation, javascript, svg, css, frontend, ui
Why it was saved
- @kalypsodesigns: Provides a compact bundle size while supporting complex chained and multi-parameter animations across canvas and DOM elements.
- @frontendjoe: Makes complex staggering effects, overlapping animations, and layered CSS transforms easy to choreograph on the web.
- @JulianGarnier: The go-to library for animating the web; the reel of demos shows the range of what it can do.
Compare
Related
Open-source animation library for React, Vue, and vanilla JavaScript
High-performance JavaScript animation library for web elements, SVG, and canvas.
Modern CSS technique for smooth height transitions without fixed pixel heights
Animated, accessible rolling-number component built on native Intl.NumberFormat and Web Animations.
Lightweight 5KB WebGL globe with CSS anchor positioning support
Open-source icon set with over 1,500 symbols in multiple formats.
Updated