1731112 - Support Devtools for scroll-driven animations

Status: NEW

(DevTools :: Inspector: Animations, task, P2)

Description

[Boris Chiou [:boris]]

We are working on scroll-linked animations now, and it definitely needs the Devtools support for

1. the animations generated by CSS (Stylesheet) (Bug 1676780)
   • animation-timeline property
   • @scroll-timeline rule
2. the animations generated by Javascript (DOM API) (Bug 1676781)
   • ScrollTimeline interface

Comment 1

[Julian Descottes [:jdescottes]]

needinfo: check the impact on devtools side and come up with a rough sizing.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

I'm seeing that there's now an animation-timeline property, which seems to be used in combination with the scroll-timeline property, so I guess that in the rule view, we could show which elements sets the scroll-timeline property for the animation-timeline set on a rule? Similar to what we did for container queries (see https://twitter.com/FirefoxDevTools/status/1595080892417945600) so devs could navigate more easily between the "scroller" and the "target"

Boris, I was trying to test this a bit but it looks like the spec changed a bit since you filed the bug so I'm not sure how I can get a working demo, could you point me to something or give me a simple example?

When you said it needs DevTools support, do you have something specific in mind other than "it shouldn't break the inspector" ?

Finally do you have an estimate when this will be enabled in Nightly/by default? It would help us prioritize this if this is close to completion :)
Thanks!

Comment 3

[Boris Chiou [:boris]]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #2)

I'm seeing that there's now an animation-timeline property, which seems to be used in combination with the scroll-timeline property, so I guess that in the rule view, we could show which elements sets the scroll-timeline property for the animation-timeline set on a rule? Similar to what we did for container queries (see https://twitter.com/FirefoxDevTools/status/1595080892417945600) so devs could navigate more easily between the "scroller" and the "target"

Boris, I was trying to test this a bit but it looks like the spec changed a bit since you filed the bug so I'm not sure how I can get a working demo, could you point me to something or give me a simple example?

When you said it needs DevTools support, do you have something specific in mind other than "it shouldn't break the inspector" ?

Finally do you have an estimate when this will be enabled in Nightly/by default? It would help us prioritize this if this is close to completion :)
Thanks!

The spec keeps changing recently, and so I think it may not be enabled by default (i.e. release/beta) before the end of this year. I keep my ni until I think it's ready to go to next step, or we have a clear time frame to enable this in Nightly. At that moment, I will provide the example and what we should have in the inspector. So for now I think it's fine to leave this bug with a lower priority.

Comment 4

[Boris Chiou [:boris]]

Remove my ni and make this bug depends on Bug 1817303. I will come to check what we need for Devtools once we are ready to enable scroll-driven animations (CSS) on nightly.

Comment 5

[Sebastian Zartner [:sebo]]

This bug and bug 1841013 should probably be merged. And I made this bug block bug 1841005, which covers support for scroll-driven animations throughout the DevTools.

Boris is working again on enabling scroll-driven animations for Nightly. Therefore, I believe the (basic) DevTools support should be prioritized.

Sebastian

Comment 6

[Sebastian Zartner [:sebo]]

Attachment: UI in Chrome DevTools

Interating on my comment in the other issue regarding the UI, the Chrome DevTools show the different timelines (scroll- and time-based) at the top of their Animations panel. And the UI of both is similar but differs in a few things.

The scroll-based timeline refers to the size of the scroll container. And the play button and speed buttons are deactivated. The scrubber is indeed linked to the scroll position within the scroll container, so when you drag it wihtin the timeline, the scroll container is scrolled as well. Little dots indicate the animation range.

I think, for a basic implementation of scroll-driven timelines we need:

• a way to switch between the two types of animations (e.g. tabs at the top of the panel).
• to make the timeline pixel- or percentage-based.
• to base the sizes and positions of the displayed animations on the scroll container size. (There might be different scroll containers, so there might be a way to differenciate between scroll containers, as well.)
• to display the animations in the timeline similar to time-based ones including start and end, the used animation function and delays, but additionally include the animation range.
• to display the selected animation like a time-based animation except.
• to consider the two different timelines of scroll-driven animations, scroll progress timelines and view progress timelines.

Sebastian