Motion drives animations through the browser's native Web Animations API. Zero runtime cost, hardware-accelerated by default.
Get startedinView()
Each element with data-reveal gets its own inView() observer. The callback fires once when the element enters the viewport — the animation plays forward and the observer disconnects.
stagger()
01
Web Animations API
Motion uses WAAPI under the hood — browser-native, off main thread, GPU composited.
02
~18 KB total
The full animate + inView + scroll + stagger surface weighs less than one GSAP plugin.
03
stagger(0.08)
Pass a delay function to the delay option. Each child gets an offset of n × 80ms.
04
From-state in CSS
Initial opacity and translate are set in CSS — no invisible flash before JS runs.
05
Any selector
Pass a CSS selector string or a NodeList. Works on grids, lists, and table rows.
06
Plays once
inView returns an early-exit function. Return it in the callback to auto-disconnect after one play.
Easing
The cubic-bezier [0.22, 1, 0.36, 1] decelerates fast and settles softly — a good default for entrance animations that feel physical without an actual spring.
List example