Scroll-Driven Animations Debugger (DevTools Extension)

By admin
I’m extremely pleased to announce the release of

Scroll-Driven Animations
ORG

Debugger, a

DevTools
ORG

extension to visualize and debug

Scroll-Driven Animations
ORG

.

~

~

To jump right in here’s a video of the extension in action, tested on scroll-driven-animations.style:

The extension adds a new pane named “

Scroll-Driven Animations
WORK_OF_ART

” to

Chrome DevTools’s Elements Panel
ORG

. To use it, inspect an Element as you’d normally do and select the “

Scroll-Driven Animations
WORK_OF_ART

” pane. When selected, you’ll see a visualization of

the Scroll-Driven Animations
ORG

that are added to the inspected element. The visualization is a live representation of the scroller, animated element, and – in case of a

ViewTimeline
ORG

– tracked subject: as you scroll in the document, the visualization also updates.

Use the top toolbar to switch between multiple animations (if

more than one
CARDINAL

) or to set the visualization’s scale factor. Typically you don’t need to set the scale factor, as the visualization automatically adapts itself to the available space. Also included in the top toolbar are an indicator telling you which type of scroll timeline you are dealing with, and some progress numbers: total scroll progress, effect progress, actual scroll offset (in pixels).

Use the “Edit Values” toggle at the bottom to bring up a range editor. Once the editor is shown, the visualization also shows indicators for the start and end range. In case of a

ScrollTimeline
ORG

these are

two
CARDINAL

lines on the scroller’s contents. In case of a

ViewTimeline
ORG

these are

two
CARDINAL

boxes representing the areas for the set animation-range-* values. Change the values using the dropdown and/or the inputs. Note that the inputs do not live-update (for now); after changing click somewhere outside the field to update the value.

~

# Get the extension

The extension is available on

the Chrome Web Store
ORG

:

If you like this extension, please leave a review on

the Chrome Web Store
ORG

.

There is also a repository on GitHub where you can report issues and file feature requests. The source has not been published on it yet, but will follow some time

later this year
DATE

.

~

When I launched scroll-driven-animations.style back in

June
DATE

, it came with

two
CARDINAL

handy features that I had worked on – and teased about – before the site’s launch.

One
CARDINAL

is a View Timeline Ranges Visualizer and the other is an experimental debugging experience as demonstrated in the video below:

https://www.bram.us/wordpress/wp-content/uploads/2023/06/scroll-driven-animations-minimap-debugger.mp4 Recording the experimental debugger on scroll-driven-animations.style. This debugger has been removed and is now replaced by the extension.

As I had mentioned in the announcement post, both these tools would form the basis for future debugging features part of

Chrome DevTools
ORG

.

Because our

DevTools
ORG

team is extremely busy with a ton of other features (which I can’t talk about just yet) I wondered what it would take to turn my code into a

DevTools
ORG

extension. Turns out that was pretty easy to do, as you can load an HTML page as a Sidebar Pane of DevTools’s Elements Panel (

docs
PERSON

). The difficult parts was in orchestrating the passing of the data between the page and the extension and back.

Two days later
DATE

I had a working POC:

Proof of Concept of the extension.

Using my very own scroll-driven-animations.style as the playground to test the extension, I identified a bunch of gaps my POC was still missing. For example, it didn’t support position: sticky in the visualization, and supported only percentages in the range offsets. These holes have been plugged, with proper position: sticky support (both top and bottom) and support for ranges that use pixels/ calc() /etc. as their offset.

Almost there … TODO.​md pic.twitter.com/mhuEU9Sd1O —

Bramus
PRODUCT

(

@bramus
ORG

)

September 5, 2023
DATE

Capture of my TODO.md, before almost reaching a v1 state.

I also had to work around

Chrome
ORG

Bug #

1478624
MONEY

which reports the wrong values for rangeEnd and

rangeStart
PERSON

when reading them from an animation.

~

# Known Issues and Limitations

While the extension is mature enough to be released as version 1.0.0, there still are a few bugs that need to get fixed and future enhancements that could be done.

Biggest bugs/shortcomings right now are:

Issue #

1
MONEY

– The view-timeline-inset is not taken into account in the visualization

is not taken into account in the visualization Issue #

16
MONEY



Keyframes
ORG

that contain range information don’t get parsed

These shortcomings are marked as P0, so sit at the very of my priority list. I’m also pretty sure that more bugs will get reported once people start using it.

There’s also a few things that I could not work around. These issues are collected in the FAQ for the extension.

Issue #

17
MONEY



One
CARDINAL

unfixable issue is that ranges with relative units – such as animation-range:

0 90vh
CARDINAL

– get reported as absolute values in pixels. This is because of

AnimationEffect.getComputedTiming
FAC

() them as such.

– get reported as absolute values in pixels. This is because of them as such. Issue

#19
MONEY

and Issue #

20
MONEY

– Another one is caused by a bug in

Chrome DevTools
ORG

(Chrome Bug #

1480418
DATE

): when asking the value of $

0
MONEY

which I need to show you the right info about the element, it reports undefined when inspecting an element that is inside an iframe . I’ve tried to cater for this by showing a warning when that happens, but the problem is that

DevTools
ORG

also sometimes reports the wrong value. So unfortunately this extension won’t work on CodePen directly, as you need to open the page in

CodePen
ORG

’s standalone Debug View

first
ORDINAL

.

~

# Future Plans

The short term plan is to fix most of the bugs as possible and add a few new features. Maybe I’ll find some time to iterate on a few more ideas which could help you better debug

Scroll-Driven Animations
ORG

(feel free to file an idea in the repo).

The long term plan is for this extension to stop existing over time. This will happen some time after

Chrome DevTools
ORG

has debugging tools and features for

Scroll-Driven Animations
ORG

built-in. This plugin exists to fill the gap between now and then. Rest assured that the tooling offered by this plugin will also be incorporated in

DevTools
ORG

,

one
CARDINAL

way or another.

~

# Spread the word

To help spread the contents of this post, feel free to retweet its announcement tweet post / toot post :

I’m extremely pleased to announce the release of

Scroll-Driven Animations
ORG

Debugger, a

Chrome DevTools
ORG

extension to visualize and debug

Scroll-Driven Animations
ORG

. 🔗 https://t.co/p7CyjLMblB Get the extension from

the Chrome Web Store
ORG

and start inspecting https://t.co/yvZO8aij8f pic.twitter.com/0bP1o9i0xG —

Bramus
PERSON

(

@bramus
ORG

)

September 12,
DATE

2023

~