{
  "id": 14987601,
  "title": "A DevTools pane now draws the ranges behind scroll-triggered animations",
  "url": "https://urgent.news/2026/10/16/a-devtools-pane-now-draws-the-ranges-behind-scroll-triggered",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-16T16:07:56.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/leobaniak/a-devtools-pane-now-draws-the-ranges-behind-scroll-triggered-animations-j5f"
  },
  "original_language": "en",
  "account": "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.",
  "summary": "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…",
  "key_points": [
    "New DevTools extension displays scroll-triggered animation ranges",
    "Shows activation ranges in blue and green, editable within pane",
    "Supports ScrollTimeline, ViewTimeline, and position: sticky elements"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}