Scroll

Cards stick to the top as you scroll and each one shrinks and dims as the next slides over it, as on Apple product pages.

The page content slides up to reveal a footer that is already in place underneath.

A strip of items slides sideways while the page scrolls down and the section stays pinned.

An element drifts at its own speed as it crosses the viewport, exactly in step with the scroll.

A table of contents that lights up as you read.

An image that starts narrow and rounded and opens to the full width as it scrolls into view.

A hairline along the top of the viewport that fills as the page is read.

Entrance on scroll that plays once and stays, staggers its children, scrubs with the scroll position when asked, honours reduced motion, and keeps working after every ClientRouter navigation.

Bind translate, scale, rotate and opacity to the scroll position: the element goes from the start values you give to neutral across a range of its own passage through the viewport, exactly in step.

Steps on the left scroll by; one visual on the right stays put and changes with them.

A line beside an article fills as it is read, with a dot at its head.