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

opacity

translateY

translateX

scale

rotate

any CSS

Mix properties freely: scale, x, y, rotate, opacity.
All of it is driven by the same scroll offset.

technique: scale + x + opacity

003

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.