Anime.js

Anime.js is a JavaScript animation engine with a simple yet powerful API that works across CSS properties, SVG, DOM attributes, and plain JavaScript objects. Version 4 rewrote the library as a tree-shakeable set of ES modules covering timers, animations, timelines, animatables, draggables, scopes, and the Web Animations API, so projects only ship the pieces they actually import.

It is aimed at developers who want fine-grained, code-driven control over motion — staggered sequences, spring and cubic-bezier easings, SVG line drawing, scroll-linked playback, and draggable interactions — without adopting a full UI framework or a heavyweight animation suite.

What You Get

• A unified animate() function that targets CSS properties, SVG attributes, DOM attributes, and JS objects with one consistent options object
• A createTimeline() API for sequencing and synchronizing multiple animations with precise offsets, labels, and playback controls
• Built-in stagger() helpers for creating wave-like, grid-based, or randomized delays across groups of elements
• A large library of easing functions including cubic-bezier, spring physics, linear, steps, and irregular easings
• Native Web Animations API (WAAPI) integration via a dedicated waapi module for GPU-accelerated, off-main-thread animation
• Draggable, scope, and scroll-observer modules for building interactive, gesture- and scroll-linked motion
• First-class TypeScript type declarations generated alongside every module

Common Use Cases

• Animating landing-page and marketing-site micro-interactions (hover states, reveals, staggered lists)
• Building SVG-based logo animations, line drawings, and morphing shapes
• Sequencing complex multi-step UI transitions with a timeline instead of chained CSS transitions
• Adding scroll-linked and drag-based interactions to custom components without a full animation framework

Under The Hood

Architecture — Anime.js v4 is built around a single global Engine (extending an internal Clock) that runs one requestAnimationFrame loop and walks a linked list of active “tickables” (timers, JSAnimations, and Timelines) each frame, computing delta time once and calling a shared tick()/render() pipeline (src/core/render.js, src/engine/engine.js) for every active item. Every animatable — a single tween, a timer, or a nested timeline — implements the same tickable contract, which is what lets timelines contain animations and other timelines interchangeably. Target values are normalized once at creation time through composeComplexValue/values.js and then interpolated per frame via lerp, keeping the hot path allocation-free.

Tech Stack — The library is pure, dependency-free JavaScript (no runtime dependencies in package.json), authored as ES modules under src/ and built with Rollup into ESM, CJS, and UMD/IIFE bundles plus hand-written JSDoc-derived .d.ts type declarations via tsc -p tsconfig.types.json. The waapi module is a thin adapter that hands playback to the browser’s native Web Animations API instead of the internal engine when native GPU-accelerated playback is preferable.

Code Quality — The codebase is organized into clearly separated feature modules (core, engine, animation, timeline, draggable, scope, svg, text, easings, waapi, adapters), each with an index.js barrel export, favoring small focused files (e.g. engine.js is under 200 lines) over monoliths. Every exported function carries JSDoc @param/@return/@import type annotations that double as the TypeScript source of truth. Tests live under tests/suites (33 suite files) and run both in-browser (via browser-sync) and in Node (mocha with --allow-natives-syntax), covering timers, animations, timelines, easings, and SVG/draggable behavior.

API Design — The public surface centers on a small number of verbs — animate(), createTimeline(), createTimer(), stagger(), createDraggable(), createScope() — that all accept the same shape of parameters (property name, to/from, duration, ease, delay), so learning one function transfers directly to the others. Per-feature subpath exports (animejs/svg, animejs/waapi, animejs/draggable, etc.) let consumers import only what they use, keeping bundle size proportional to actual usage rather than pulling in the whole engine.