12 CSS Scroll Animations

A CSS scroll animation is motion driven by scroll position rather than by a timer. As the page scrolls, elements can reveal, fade, slide, parallax, pin in place, wipe open, or zoom. Because the motion is tied to where the scroll is — not how much time has passed — scrolling back reverses it. This collection covers the most common production patterns: sticky parallax scenes, kinetic typography, staggered grid and list reveals, animated data counters, clip-path wipes, 3D card entrances and full scrollytelling tours.

Each demo is a complete, standalone HTML document — its own markup, CSS and a small script — rather than a snippet. Reveal and stagger effects use IntersectionObserver to add a class when an element enters the viewport, then CSS transitions handle the motion. Parallax and scrollytelling demos read scroll position (via a scroll listener with requestAnimationFrame, or position: sticky) to move layers and swap panels. There are no libraries and no dependencies — copying the document gives you a working file.

Every demo is a full-page scroll experience with its own global styles, body background and scroll behaviour. Rendering them all on one page would cause their CSS to collide and their scroll handlers to fight over the window. So each demo is isolated in its own iframe — scroll inside a frame to see that demo move, without it affecting the page or the other demos. The full HTML document is shown in the code panel below each preview so you can copy it intact.

Yes. These demos rely on IntersectionObserver, position: sticky, clip-path, CSS transforms and scroll listeners — all supported in every modern browser, including Safari. They avoid the still-cutting-edge scroll-driven timeline APIs (animation-timeline, scroll(), view()) so the demos behave identically across Chrome, Edge, Firefox and Safari with no fallback needed.

The key rule is to respect prefers-reduced-motion. Scroll-linked motion is decorative, so when adapting these demos you should add a reduced-motion media query that collapses each effect to its finished, fully-visible state — no movement, no animation. Never hide content behind a scroll animation a user cannot trigger: reveal effects should start hidden but become visible by default under reduced motion, and the markup reading order should stay correct so screen readers walk the content normally regardless of the animation.

Each demo is a self-contained HTML document, so the fastest path is to copy one whole and strip it down — keep the structure and the script, then swap the placeholder content, colours and gradients for your own. The demos are written as full-page experiences (320vh sticky scenes, multi-screen blocks), so in your project you'll typically drop them into a real page section and let them run against the actual page scroll. Tune the IntersectionObserver thresholds and transition delays to control when and how fast each effect fires.