All animations / Scroll
Scroll
Animation tied to scrolling: reveals, progress, pinning, counters and snapping. 8 animations.
Reveal on scroll
Elements fade up the first time they enter the viewport, detected with IntersectionObserver.
Scroll progress bar
A bar at the top fills as you read down the page. Pure CSS with animation-timeline: scroll(), plus a JS fallback.
Pinned horizontal scroll
A section pins to the screen while vertical scrolling slides a row of panels sideways.
CSS scroll-driven reveal
Each card animates in as it crosses the viewport, driven entirely by CSS animation-timeline: view(), with no JavaScript.
Count-up numbers
Stats count from zero to their value when scrolled into view, with an ease-out so they settle gently.
Pinned hero that shrinks
A full-screen hero stays pinned and scales into a rounded card as you scroll, revealing the page beneath.
Scroll text fill
A paragraph lights up word by word as you scroll, from dim grey to full white.
Scroll snap sections
Full-screen sections that lock into place as you scroll, with content that animates in on arrival.