Why this matters

Most scroll effects still rely on JavaScript. That works, but it often adds timing bugs, extra code, and jank you do not need. CSS scroll-driven animations solve the same problem with a cleaner model: the browser owns the timeline, and your animation follows the scroll position.

This post keeps the scope tight. We will cover the pieces that matter in real UI work, then use three demos to make the behavior obvious: a progress bar, a parallax scene, and a reveal-on-scroll pattern.

The core idea

Scroll-driven animation is still just CSS animation. The difference is the timeline is not time-based anymore. It is tied to scroll progress or an element’s visibility.

The two ideas to remember are scroll timelines and view timelines. A scroll timeline follows the movement of a scroll container. A view timeline follows when an element enters or leaves the viewport.

 
@supports (animation-timeline: scroll()) {
  .bar {
    animation: fill linear both;
    animation-timeline: scroll();
    animation-range: 0% 100%;
  }
}
 
@supports (animation-timeline: view()) {
  .card {
    animation: fade-up linear both;
    animation-timeline: view();
    animation-range: entry -10% cover 40%;
  }
}

The important part is the range. That is where you decide when the motion starts and when it ends. Without that control, scroll animations can feel too eager or too busy.

Demo

The first demo is the smallest useful version of the idea. It shows a progress bar that fills as you scroll.

Scroll progress

This keeps the layout simple and lets the browser own the animation.

Section 1. The long scroll area gives the progress bar enough distance to feel smooth.

Section 2. The long scroll area gives the progress bar enough distance to feel smooth.

Section 3. The long scroll area gives the progress bar enough distance to feel smooth.

Section 4. The long scroll area gives the progress bar enough distance to feel smooth.

Section 5. The long scroll area gives the progress bar enough distance to feel smooth.

Section 6. The long scroll area gives the progress bar enough distance to feel smooth.

Section 7. The long scroll area gives the progress bar enough distance to feel smooth.

Section 8. The long scroll area gives the progress bar enough distance to feel smooth.

Guardrails

Use transform and opacity whenever possible. Those properties are the easiest to animate smoothly. Avoid animating layout-heavy properties like top, left, or width unless you have a very good reason.

Respect reduced motion. If the animation is decorative, turn it off. If it carries meaning, keep the content visible even when the motion is removed.

 
@media (prefers-reduced-motion: reduce) {
  .reveal-card {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

Do not build everything with scroll timelines just because the API is new. Use it when the scroll position is part of the story. Skip it when plain CSS or a static layout is clearer.

What I would use it for

I would use scroll-driven animations for progress indicators, section reveals, editorial storytelling, and light spatial effects. I would not use them to hide important content, replace navigation logic, or create motion that exists only to look technical.

The best version of this feature feels almost invisible. The interface gets a little more alive, but the reading experience still stays calm, clear, and fast.