---
title: "Animate on scroll with CSS · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/interface/scroll-driven-animations
updated: 2026-10-20
licence: "All rights reserved"
---

# Animate on scroll with CSS

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Optional
- Chapter: [Interface](https://agentwranglers.se/playbook/website/interface)
- Rule: Drive scroll effects with CSS `animation-timeline` instead of scroll event listeners in JavaScript.
- How: Use `animation-timeline: scroll()` or `view()` with `animation-range` for scroll effects. Chrome and Safari 26 support it, and Firefox does not yet by default. Wrap it in `@supports`, animate only opacity or transform, and turn it off under `prefers-reduced-motion: reduce`.
- Check: A grep of the scripts finds no `scroll` event listener used for visual effects.

Example:

```css
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress {
      transform-origin: left;
      animation: grow linear both;
      animation-timeline: scroll();
      animation-range: 0% 100%;
    }
  }
  @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/interface/scroll-driven-animations`.

- Previous: [Size full-height panels for phones](https://agentwranglers.se/playbook/website/interface/dynamic-viewport-units)
- Next: [Skip page fades unless they help](https://agentwranglers.se/playbook/website/interface/view-transitions)
- [Interface](https://agentwranglers.se/playbook/website/interface)