Guide to Scroll‑Driven Animations with CSS

June 26, 2025

Guide to Scroll‑Driven Animations with CSS

CSS animations can now be linked to user scrolling without any JavaScript — just pure CSS.

1. Three Parts of a Scroll‑Driven Animation

  • Target: the element you animate.
  • Keyframes: defines the animation steps.
  • Timeline: controls animation based on scroll/view, not time.

2. Using scroll() Timeline

Instead of time, the animation progress depends on the user scroll. Example:

footer::after {
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  height: 1em;
  width: 100%;
  background: gold;
  animation: progress-expand;
  animation-timeline: scroll();
}

@keyframes progress-expand {
  from { width: 0%; }
  to { width: 100%; }
}

3. Accessibility Tip

Wrap animations with reduced‑motion preference check:

@media not (prefers-reduced-motion) {
  footer::after {
    animation: progress-expand;
    animation-timeline: scroll();
  }
}

4. Advanced: Custom Scroll/View Timelines

Use scroll(nearest block), named timelines, view(), animation-range, and timeline-scope to fine-tune behavior.

Scroll-driven animations now work natively in Safari 26 beta and Chrome 115+, offering smooth, hardware-accelerated UX.

Blog

Using useCallback in React: Benefits, Limitations, Best Practices

Jul 31, 2025

The useCallback hook in React is used to return a memoized version of a callback function, so it's only recreated when its dependencies change. The...

Stop Copy-Pasting Code! Learn How to Use Traits in Laravel the Right Way

Jul 01, 2025

🚫 Stop Copy-Pasting Code! Ever duplicated slug logic or logging across multiple models? Laravel's Traits got your back. 1. What’s a Trait?...

Mastering Async Iteration in JavaScript with Array.fromAsync()

Jul 27, 2025

🔍 What Exactly is Array.fromAsync()? Array.fromAsync() is a static method introduced in ES2024 as part of JavaScript's growing support for asynchr...

React Labs: View Transitions & Activity

Jun 17, 2025

React Labs: View Transitions & Activity Published April 23, 2025 by Ricky Hanlon. React Labs is sharing two new experimental featu...

Efficient Reporting & Big Data Reports with Queues

Jul 07, 2025

How to cache report queries with fixed timelines How to generate large reports asynchronously using job queues 1. 🧠 Report Query Caching wi...

Guide to Scroll‑Driven Animations with CSS

Jun 26, 2025

Guide to Scroll‑Driven Animations with CSS CSS animations can now be linked to user scrolling without any JavaScript — just pure CSS. 1. Thr...