CSS scroll animations

Scrollable list with a slim ocean gradient thumb — styled for both WebKit and Firefox.

Horizontal ocean card rail that snaps each tile to the left edge, scrollbar hidden.

Sticky ocean progress bar driven by scroll-timeline — it tracks the scroll with no listener.

Grouped list whose ocean date headers stick and blur the rows sliding beneath them.

Cards that fade and rise as they enter the scrollport, using view() — falls back to a plain fade-in.

Overflowing chip row masked to fade at both edges so it reads as scrollable without a scrollbar.

Snap-scrolling pane beside an ocean dot rail that marks the section you're on.

Price and action pinned to the top of a scrolling pane with negative margins cancelling the padding, so the blur runs edge to edge.

Progress thumb riding a sticky rail beside scrolling copy, hiding the native scrollbar so the rail is the only indicator.

Floating return control pinned with `position: sticky` inside the scroller, so it needs no fixed positioning and no scroll listener.

Horizontal rail with `scroll-snap-align: center`, so tiles settle centred rather than flush left and the row never stops half-way.

Document outline pinned beside scrolling body copy, the active entry marked by a coloured left rule so the position reads without a filled background.

Progress rail stuck to the top of its own scroller, scaled rather than resized so the indicator animates without triggering layout.

List whose last child is a loading marker rather than a button, positioned so it enters the viewport a little before the content runs out and the next page can be fetched.

Content sheet dragged down past its own top edge to expose a spinner parked behind it, the indicator scaling up from the gap rather than being pushed along by the sheet.

Masthead that gives back two thirds of its height as the page moves under it — logo, wordmark and nav each shedding at their own rate rather than scaling as a block.

Overflow cue as a tinted shadow at whichever edge still has content past it, which survives a patterned backdrop where a fade-to-transparent mask would not.

Scrollable line-item list whose total row stays pinned to the bottom edge while the items scroll beneath it.

Scroll box whose background tints from cool blue to warm rose as you scroll, driven purely by a scroll timeline.

Vertical scroll box that snaps hard between full-height page panels, one section per scroll.

Horizontal snap rail where each card scales up and brightens as it passes the centre, driven by a view timeline.

Chat thread scroller where each day divider pill sticks to the top until the next day pushes it away.

Vertical picker wheel that snaps each value into a highlighted centre band with faded edges above and below.

Horizontal card rail with a slim gradient scrollbar of its own beneath it, sized to the rail rather than the page.