Scroll-Driven Animations

ELI5 — The Vibe Check

Scroll-driven animations let you tie animations to scroll position using pure CSS — no JavaScript scroll listeners, no Intersection Observer hacks. As the user scrolls, elements fade in, parallax, progress bars fill, headers shrink — all driven by CSS. It's like the browser finally learned what every marketing website has been trying to do with JavaScript for a decade.

Real Talk

CSS Scroll-Driven Animations bind CSS animations to scroll progress rather than time, using animation-timeline: scroll() or animation-timeline: view(). The scroll() timeline tracks a scroll container's position, while view() tracks an element's visibility in the viewport. Combined with @keyframes, this enables performant scroll-linked effects (parallax, reveal animations, progress indicators) without JavaScript, running on the compositor thread.

Show Me The Code

.progress-bar {
  animation: grow linear;
  animation-timeline: scroll();
}

@keyframes grow {
  from { width: 0%; }
  to { width: 100%; }
}

.reveal {
  animation: fadeIn linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

When You'll Hear This

"Use scroll-driven animations for the reveal effects — no JS needed." / "The progress bar at the top is a scroll-driven animation in 3 lines of CSS."