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

Scroll-triggered animations can be challenging to debug due to the invisible elements involved. A new DevTools extension, unveiled by Bramus van Damme on October 14, aims to address this issue by displaying the relevant ranges on screen within the Elements panel of Chrome DevTools. By selecting an element, the extension offers an interactive minimap of the scroller, element, and target, accommodating both ScrollTimeline (scroll()) and ViewTimeline (view()).

Furthermore, the extension supports position: sticky elements. The key components displayed include the timeline-trigger-activation-range in blue and timeline-trigger-active-range in green, both of which can be edited live within the pane. A status light indicates the trigger's activation status, shifting from red (Inactive) to green (Active) when the trigger activates.

The extension builds upon Bramus' previous 2023 creation, Scroll-Driven Animations Debugger, reusing its code. However, two limitations are acknowledged: ranges specified in relative units, such as 90vh, are displayed as pixel values, and elements nested within iframes are incompatible. The extension is distributed through the Chrome Web Store, limiting its functionality to Chrome-rendered content.

The post doesn't address tooling for other engines. Observations suggest potential interest in resolving the iframe bug, given its relevance to embedded demos, and the possibility of a similar range view in other browser DevTools.