The library

Techniques, not templates

Every trick recreated from the source video as a live, self-contained demo. Search, filter, open, steal.

1 / 4

Scroll-Driven Animation: The Scroll Is the Clock

A scroll-driven animation is an ordinary @keyframes animation with its clock swapped out: animation-timeline: view() replaces time with the element's own trip through its scroller. Nothing fires, nothing needs teardown, and it runs on the compositor. animation-range picks which slice of that trip the keyframes get: cover, entry, exit, contain. Rings and cards pin with position: sticky and read scroll(), since view() times an element against travel a pinned box no longer has. Rows stagger inside entry, because animation-delay is a length of time and this timeline has none. Two traps: animation-timeline goes after the animation shorthand, which resets it, and @supports has to land everything finished where scroll timelines are missing.

animationcssscrollno-jsanimation-timelinescroll-drivenanimation-range

2 / 4

Pure CSS Sticky Header in a Scroll Container

A header that smoothly sticks to the top of its parent scrollable container as content scrolls underneath, achieved purely with CSS position: sticky and without any JavaScript. This snippet demonstrates common pitfalls and correct implementation.

csslayoutscrollstickypositionnojsheader

3 / 4

Silky Edge Fades

Applies a smooth gradient mask to the top and bottom edges of a scrollable container, making content appear to melt into the background instead of ending abruptly. This creates a more polished and continuous user experience.

uxcssscrollgradientmasksmooth-transition

4 / 4

CSS Scroll-Driven Progress Bar & Reveals

This snippet demonstrates two powerful CSS scroll-driven animations: a reading progress bar that fills as the user scrolls the page (using `animation-timeline: scroll(root)`) and individual cards that fade and lift into view as they enter the viewport (using `animation-timeline: view()`), all achieved with pure CSS, no JavaScript.

animationcssscrollrevealprogress barperformance