# CSS scroll-triggered animations: visualize and adjust ranges

Canonical source : [CSS scroll-triggered animations: visualize and adjust ranges](<https://sebastien.rigaux.be/en/tech-watch/links/css-scroll-triggered-animations-visualize-and-adjust-ranges>)

This Chrome DevTools extension makes CSS animations triggered by scrolling easier to debug: a minimap locates the scroller, element, and subject, while colored markers show activation and active ranges. Values can be edited live; the tool supports `ScrollTimeline`, `ViewTimeline`, and elements using `position: sticky`.

Two limitations come from Chrome: relative units such as `90vh` are reduced to computed pixel values, and elements inside an `iframe` are not supported. The extension fills a gap in DevTools while built-in support remains a possible future improvement.

- Selected on : 2026-10-22

- Resource publication : 2026-10-14

- Entry updated : 2026-11-07T20:32:37+0000

- Format : Article

- Source language : EN

- Credit : @bramus

- Found via : [Frontend Focus](<https://frontendfoc.us/>)

Original resource : [CSS scroll-triggered animations: visualize and adjust ranges](<https://www.bram.us/2026/10/14/scroll-triggered-animations-debugger-devtools-extension/>)

Tags : [CSS](<https://sebastien.rigaux.be/en/tech-watch/tags/css>) · [Animation](<https://sebastien.rigaux.be/en/tech-watch/tags/animation>) · [Developer Experience](<https://sebastien.rigaux.be/en/tech-watch/tags/developer-experience>)

Available versions : [Français](<https://sebastien.rigaux.be/veille/liens/css-scroll-triggered-animations-visualiser-et-ajuster-les-plages>) · [English](<https://sebastien.rigaux.be/en/tech-watch/links/css-scroll-triggered-animations-visualize-and-adjust-ranges>)

[Back to tech watch](<https://sebastien.rigaux.be/en/tech-watch>)