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

Comment 7

[Julian Descottes [:jdescottes]]

Let's bring this back to triage, sorry I missed the need info.

This bug and bug 1841013 should probably be merged

And what about Bug 1350461 ? It sounds like another generic bug for devtools support for scroll timeline / animations?

Comment 8

[Sebastian Zartner [:sebo]]

(In reply to Julian Descottes [:jdescottes] from comment #7)

This bug and bug 1841013 should probably be merged

And what about Bug 1350461 ? It sounds like another generic bug for devtools support for scroll timeline / animations?

Yep, so I'd say all three can be merged.

Sebastian

Comment 9

[Julian Descottes [:jdescottes]]

(In reply to Sebastian Zartner [:sebo] from comment #5)

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

Even though it was enabled on Nightly, it's unlikely that this work will be prioritized for the current interop. So we'll wait until there is clear intent from platform to support it.

Boris, do you know which Bug we can track to know when support for scroll driven animations will move forward? It's not clear to me at the moment.

Comment 10

[Boris Chiou [:boris]]

(In reply to Julian Descottes [:jdescottes] from comment #9)

Even though it was enabled on Nightly, it's unlikely that this work will be prioritized for the current interop. So we'll wait until there is clear intent from platform to support it.

Boris, do you know which Bug we can track to know when support for scroll driven animations will move forward? It's not clear to me at the moment.

In the half year (i.e. H1 2025), we are not planning to implement new features for scroll animations. In H2, I think we may start to work on the following important features:

1. Timeline ranges: Bug 1804775
2. DOM interface support: Bug 1676794 and perhaps some follow-up bugs. (Their meta: Bug 1676781)

It's be better to start to look at the DevTools bugs after we finish these features. I will ni you once we finish most of the major bugs.

Comment 11

[Bramus]

This is possibly a long shot, but if https://bugzilla.mozilla.org/show_bug.cgi?id=1946904 could be looked into, then I can continue trying to get http://brm.us/sda-debugger up and running in Firefox.