High-Performance Scroll-Linked Animations with CSS animation-timeline

The End of JavaScript-Heavy Scroll Effects

For years, creating an animation that responds to a user's scroll position required heavy lifting from JavaScript. Developers relied on scroll event listeners, requestAnimationFrame, or libraries like GSAP and ScrollMagic. While effective, these methods often struggled with performance. Because they run on the browser's main thread, any complex calculation could cause 'jank'—visible stuttering during scroll.

The CSS Scroll-Driven Animations API changes this by moving scroll-linked effects into the browser's native rendering pipeline. By using the animation-timeline property, you can link an animation to the scroll progress of a container rather than the passage of time.

The Reading Progress Bar Example

One of the most common use cases is a progress bar at the top of an article that fills up as you read. Previously, this required calculating scrollTop and scrollHeight. Now, it takes just a few lines of CSS.

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: #3498db;
  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

In this example, animation-timeline: scroll() tells the browser to use the default scroll container (usually the document body) as the clock for the grow-progress animation. As you scroll from 0% to 100%, the animation progresses from start to finish.

Revealing Elements on Scroll

Another popular effect is fading and scaling elements into view as they enter the viewport. Using the view() function instead of scroll() allows you to target specific elements based on their visibility.

@keyframes fade-in {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}

.card {
  animation: fade-in linear forwards;
  animation-timeline: view();
  animation-range: entry 10% cover 30%;
}

The animation-range property is crucial here. It defines when the animation should start and end. In this case, the card begins fading in when it is 10% into the viewport and completes its transition by the time it covers 30% of the view. This ensures the animation feels natural and doesn't finish too early or too late.

Why This Matters for Performance

The primary advantage of this API is that it can be offloaded to the compositor thread. JavaScript-based scroll listeners run on the main thread, which is also responsible for layout, parsing, and script execution. If the main thread is busy, the animation drops frames. CSS scroll-driven animations are decoupled from the main thread, ensuring smooth 60fps (or higher) motion even on complex pages.

Browser Support and Fallbacks

Currently, the Scroll-Driven Animations API is supported in modern Chromium-based browsers (Chrome and Edge 115+). For other browsers, it is best to treat these as progressive enhancements. You can use @supports to check for compatibility and provide a static layout for browsers that don't support it yet.

@supports (animation-timeline: scroll()) {
  /* Scroll-driven styles here */
}

By embracing native CSS timelines, you reduce your bundle size, simplify your codebase, and provide a significantly smoother experience for your users.