Anime.js — Lightweight JavaScript Animation Engine

Introduction

Anime.js is a lightweight JavaScript animation library that works with CSS properties, SVG, DOM attributes, and JavaScript objects. It provides a clean, chainable API that makes complex animations simple to build and compose without heavy dependencies.

What Anime.js Does

• Animates CSS transforms, colors, and any numeric CSS property
• Handles SVG path morphing and line drawing animations
• Supports staggered animations across multiple targets with flexible timing
• Provides timeline sequencing for orchestrating multi-step animations
• Offers built-in easing functions including spring physics and custom bezier curves

Architecture Overview

Anime.js uses a single requestAnimationFrame loop that drives all active animation instances. Each animation stores its targets, property keyframes, and timing metadata. The engine interpolates values per frame, applying them directly to DOM elements, SVG attributes, or plain objects. Timelines compose multiple animations on a shared clock with relative offsets.

Installation & Configuration

• Install via npm, yarn, or include from a CDN script tag
• Import as an ES module or use the UMD build for script tags
• Zero dependencies and under 17 KB minified and gzipped
• Works in all modern browsers including IE 10 and above
• Framework-agnostic: use with React, Vue, Svelte, or vanilla JS

Key Features

• Chainable API with promise-based completion callbacks
• Keyframe support for multi-step property transitions
• Stagger utility for offsetting animations across element groups
• SVG motion path following for moving elements along curves
• Playback controls: play, pause, seek, reverse, and restart

Comparison with Similar Tools

• GSAP — more feature-rich but commercial license for some use cases; Anime.js is fully MIT
• Framer Motion — React-specific with declarative props; Anime.js is framework-agnostic
• Web Animations API — browser-native but inconsistent support and limited easing; Anime.js normalizes behavior
• Popmotion — similar size but less intuitive timeline API; Anime.js timelines are simpler
• Velocity.js — jQuery-era animation; Anime.js offers a more modern API design

FAQ

Q: Can I use Anime.js with React or Vue? A: Yes. Call anime() inside useEffect or onMounted hooks targeting refs. It works with any framework since it operates on DOM nodes directly.

Q: Does Anime.js support scroll-triggered animations? A: Anime.js itself handles animation playback. Pair it with IntersectionObserver or a scroll library to trigger animations on scroll.

Q: How does performance compare to CSS animations? A: For simple transitions CSS is faster. Anime.js excels when you need dynamic values, staggering, timelines, or JS object animation that CSS cannot express.

Q: Is Anime.js still maintained? A: Yes. Version 4 introduced a rewritten core with improved performance and TypeScript support.

Sources

• https://github.com/juliangarnier/anime
• https://animejs.com/documentation