zero dependencies · 10.7 kB gzipped · ESM

Motio

A small animation library built on one shared requestAnimationFrame loop. Presets touch only transform and opacity, layout changes go through FLIP, and reduced motion is handled rather than bolted on.

Try it GitHub npm

Playground

Pick a preset, then change the colour and the speed. Every setting applies to the preview and to the gallery below, and the snippet updates to match.

Colour, speed & motion
Colour

Motio animates transform and opacity only — colour stays in your CSS.

Speed 1.00×

A multiplier on every duration, delay and stagger the page passes in.

Motion

ticker subscribers 0

One rAF loop drives every animation on this page. Reduced motion snaps presets to their end state instead of playing them.

Presets

fadeIn