motion-scene

Scroll
Stories

Three scenes. Three techniques.
One scroll. Zero JavaScript.

001

DECLARE

Animations live directly in HTML as data attributes —
readable, portable, no build step.

data-from='{"opacity":0,"y":"-40px"}'
data-to='{"opacity":1,"y":"0px"}'
data-start="0.1" data-end="0.5"
technique: y + opacity
002

ANIMATE

opacity
translateY
translateX
scale
rotate
any CSS

Mix properties freely — scale, x, y, rotate, opacity —
all driven by the same scroll offset.

technique: scale + x + opacity
003

SEQUENCE

element 1
0.0 → 0.4
element 2
0.25 → 0.65
element 3
0.55 → 0.95

Stagger any elements by shifting their start and end offsets.
No orchestration needed.

technique: y (from below) · staggered start/end

Built with motion-components — declarative scroll animation, any framework.

← Docs Parallax showcase →