Anime.js Motion

Animate anything on the web with Anime.js — a lightweight, framework-agnostic JS animation engine. Builds timelines, staggered grids, SVG line drawing and morphing, and scroll-triggered sequences with fine-grained easing control.

This skill helps you create motion with Anime.js v4. It animates CSS properties, transforms, and DOM attributes, composes precise timelines, staggers effects across grids, draws and morphs SVG paths, follows motion paths, and hooks into scroll with the ScrollObserver — all with a tiny footprint and no framework lock-in.

When to use

Use when you need vanilla-JS animation without a framework — SVG line drawing, text and grid staggering, timeline choreography, or lightweight scroll-triggered motion on any site or component.

Examples

SVG line drawing

Animate an SVG being drawn

Use Anime.js to animate the strokeDashoffset of an SVG logo so its lines draw themselves on page load, then fill with color

Staggered grid reveal

Cascade a grid of tiles

Animate a grid of cards into view with Anime.js using a staggered delay based on grid position and an elastic ease