No JavaScriptThe whole effect is a few lines of CSS. Nothing listens to scroll events.

Scroll is the clockInstead of seconds, the animation's progress is how far the card has travelled through the view.

view() follows each cardEvery card gets its own timeline that starts when it peeks in at the bottom.

animation-range sets the windowEach card's whole trip through the view drives one animation: it rises in, holds, then lifts away.

Runs off the main threadThe browser can animate it on the compositor, so it stays smooth even when the page is busy.

Reverses for freeScroll back up and every card sinks away again. There's no state to manage.

scroll(root) drives the barThe pink progress bar at the top uses the whole page's scroll position as its timeline.

Fails gracefullyWrapped in @supports, so older browsers simply show the cards in place.