</>HTML & CSS News
CSS & layout

A DevTools pane now draws the ranges behind scroll-triggered animations

October 16, 2026scroll-triggered-animationsdevtoolscss-animationstooling
Yuki Tanaka · Web-platform & DX beatA DevTools pane now draws the ranges behind scroll-triggered animations

Scroll-triggered animations are hard to debug because the part that matters is invisible. You set a range, you scroll, and the animation either fires or it doesn't. Then you guess which edge you got wrong. Bramus van Damme's new DevTools extension, announced on Bram.us on October 14, puts that part on screen.

The extension adds a pane called "Scroll-Triggered Animations" to the Elements panel in Chrome DevTools. Select an element and the pane shows an interactive minimap of the scroller, the element and the subject. It handles both timeline types, ScrollTimeline (scroll()) and ViewTimeline (view()), and the post says it works with position: sticky.

Blue, green and a status light

The ranges are why you'd open it. timeline-trigger-activation-range is drawn in blue and timeline-trigger-active-range in green, and you can edit both values live in the pane. Next to them is a status light that goes from red (Inactive) to green (Active) when the trigger activates. That light is what I'd watch first. Say you've scrolled past where the trigger should fire and the light is still red: the problem is your range, and the minimap shows you how far off it is.

This is also a sequel. Bramus built a Scroll-Driven Animations Debugger extension in 2023, and the new one reuses code from it.

The rough edges

The post names two limits up front. Ranges written in relative units such as 90vh are shown as resolved pixel values, because that is how the Animation instance and getComputedStyle() report them. Elements inside an iframe don't work at all. The pane either shows an error or wrongly reports that there are no animations, and the post traces this to a Chrome DevTools bug, crbug/1480418.

It is a Chrome DevTools extension distributed through the Chrome Web Store, so it only inspects what Chrome renders. The post doesn't mention tooling for other engines.

What I'm watching next is that iframe bug, since embedded demos are exactly where it gets in the way. I'm also watching for a similar range view in the devtools of other engines.

Source: Bram.us (bram.us)

Related
CSS & layout

Scroll-triggered animations land in CSS: `timeline-trigger` is not `animation-timeline`

Chrome 146 is the first browser to ship CSS scroll-triggered animations. The new `timeline-trigger` property fires a fixed-duration animation when a scroll threshold is crossed, and it is a close cousin of scroll-driven animations on a very different mechanism.

June 23, 2026CSS & layout

calc-size() and round() stop your background pattern getting chopped at the bottom

Ahmad Shadeed shows how to round a section's auto height to a whole multiple of its repeating background tile with calc-size() and round(), so the tile never has to shrink or stretch the way it does with background-repeat: round. The technique works only in Chrome and Edge for now, and calc-size() is not Baseline.

October 15, 2026CSS & layout

September's Baseline haul gives CSS progress(), alpha() and revert-rule in every engine

Rachel Andrew's September roundup on web.dev lists a large batch of features reaching Baseline Newly available, among them the progress() function, the alpha() relative color function, the revert-rule keyword, <image> values in light-dark() and scroll anchoring with overflow-anchor.

October 13, 2026