Pinning

Text stays pinned while lines fade in and out with scroll progress.

Add a "Sticky Text Fade" effect (also called sticky scroll text opacity fade) to [where].
While the section scrolls, the text block should stay pinned in place and its lines should fade in and out one at a time with the scroll progress.
Tie the fades directly to the scroll position so scrolling back reverses them, and keep every line available to screen readers whatever its opacity.

Cards stick at the top as the user scrolls and pile on top of each other, often shrinking the earlier ones.

Add "Stacking Cards" (also called sticky stacking cards or a card stack scroll) to [where].
As the reader scrolls, each card should stick near the top and the next card should slide up over it, while the cards underneath shrink slightly so a neat pile builds up.
Leave a thin edge of each earlier card showing, and give the last card enough room to reach its place before the section ends.

Vertical scrolling moves a pinned row of panels sideways.

Add a "Horizontal Scroll Section" (also called horizontal scrolling or a scroll-jacked horizontal gallery) to [where].
When the section reaches the top it should stay pinned while scrolling down moves its row of panels sideways, then release once the last panel is in view.
Tie the sideways movement directly to the scroll position so scrolling back reverses it, and fall back to a normal swipeable row on small screens or for users who prefer reduced motion.

A sticky header reduces in height or size after the user scrolls down.

Add a "Sticky Header Shrink" (also called a shrinking header or shrink on scroll) to [where].
The header should stay at the top and, once the reader scrolls down a little, smoothly shrink into a slimmer bar with a smaller logo, growing back when they return to the top.
Keep the content below from jumping while the header changes size.

A bar or ring fills as the user scrolls through the page or article.

Add a "Scroll Progress Indicator" (also called a reading progress bar) to [where].
A thin bar along the top should fill from left to right in step with how far the reader has scrolled, reaching full width at the end.
Tie it directly to the scroll position with no easing lag, and keep it from covering the content.

Scrolling settles onto defined snap points such as slides or sections.

Add "Scroll Snap" (also called scroll snapping or snap scrolling) to [where].
When scrolling stops, the view should settle neatly onto the nearest section so each one lines up with the edge instead of stopping halfway.
Use the browser's native snapping so wheel, touch and keyboard scrolling all keep working, and make sure content taller than the view can still be read in full.

Animation progress is tied directly to scroll position, so scrolling forward or back plays or rewinds it.

Add a "Scroll-Linked Animation" (also called a scroll-driven animation or scroll scrub) to [where].
The animation should move exactly with the scroll position, so scrolling down plays it forward and scrolling up rewinds it on the spot, with no time-based easing of its own.
Map the whole animation to a clear scroll range, and show a sensible static state for users who prefer reduced motion.