01 / Scroll-driven

Scroll Progress Timeline

How far you have scrolled is how far the animation has played. The hairline across the top of this page is one.

also called scroll-linked animation · page progress

The animation's progress is the scroll container's progress. Zero JavaScript, and it runs off the main thread — so it cannot jank even while the main thread is busy.

How it is built

animation-timeline: scroll(root);