Scroll-Triggered Animations Debugger (DevTools Extension)

Screenshot of the Scroll-Triggered Animations Debugger Extension fopen in DevTools. The extension shows a minimap, the ranges, and fields to edit the ranges. I’m extremely pleased to announce the release of Scroll-Triggered Animations Debugger, a DevTools extension to visualize and debug CSS Scroll-Triggered Animations. ~ Table of Contents Demo Get the extension Backstory Known Issues and Limitations Future Plans Spread the word ~ # Demo To jump right in, here’s a video of the extension in action: Recording of the Scroll-Triggered Animations Debugger in action. The extension adds a new pane named “Scroll-Triggered Animations” to Chrome DevTools’s Elements Panel and offer the following debugging features: Visualize the Scroll-Triggered Animation’s scroller, element, and subject in an interactive minimap Supports both ScrollTimeline (scroll()) and ViewTimeline (view()). Shows an active/inactive status light indicator that switches from red (Inactive) to green (Active) when the trigger…