Scroll animations

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.

A statement that fills in as it is read: the words start faint and take their full colour in reading order, line after line, while the block crosses the viewport.

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 picture that resolves from blocks as it scrolls into view: a grid of squares in one colour lies over the slot, and each square clears on its own stretch of the picture's entry, picked by a seed, so the picture comes through in a scatter and stands whole by the time it is a third of the way up the screen.

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.