Animation & scroll

Anime.js & Motion One

Two lean JavaScript animation engines. Anime.js is a mature, feature-rich timeline library; Motion One is a tiny modern engine built on the native Web Animations API. Both run for real below.

Demo 01 · Anime.js

Stagger wave

anime.jsAnime's stagger() helper offsets each target's timing. Here it ripples a row of bars up and down in a smooth wave.

anime({
  targets: '.bar', scaleY: [1, 2, 1],
  delay: anime.stagger(60, { from: 'center' }),
  easing: 'easeInOutSine', loop: false
});

Demo 02 · Anime.js

Grid stagger from a point

anime.jsStaggering across a 2D grid lets a wave radiate from any cell. This one bursts outward from the centre.

Demo 03 · Anime.js

SVG line drawing

anime.jsAnime has a built-in setDashoffset helper that "draws" SVG strokes. Watch the path trace itself.

Demo 04 · Motion One

Spring with Motion One

Motion OneMotion One animates via the native Web Animations API and ships a real spring() generator. Toggle the knob — it springs to its new position.

import { animate, spring } from 'motion';
animate(knob, { x: 260 }, { type: spring({ stiffness: 220, damping: 14 }) });

Demo 05 · Motion One

Timeline sequence

Motion OneMotion's timeline() sequences multiple animations with relative offsets — much like Anime's timeline, but on the native engine.

Built with two real libraries: anime.js 3.2.2 (Demos 1–3) and Motion One 10.18.0 (Demos 4–5), both loaded from cdn.jsdelivr.net. Each badge shows which engine powers that demo — the staggers and SVG draw are genuine anime.js, and the spring and timeline are genuine Motion One. Page chrome is the shared CSS shell.

↑ All 64 tools