1754897 - Support Named Scroll Progress Timelines

Status: RESOLVED FIXED

(Core :: CSS Transitions and Animations, enhancement, P3)

Description

[Boris Chiou [:boris]]

Support the following properties:

1. scroll-timeline-name longhand property, https://drafts.csswg.org/scroll-animations-1/rewrite#scroll-timeline-name
2. scroll-timeline-axis longhand property, https://drafts.csswg.org/scroll-animations-1/rewrite#scroll-timeline-axis
3. scroll-timeline shorthand property, https://drafts.csswg.org/scroll-animations-1/rewrite#scroll-timeline-shorthand

Comment 1

[Boris Chiou [:boris]]

And now I will implement this by the definition in the current spec because the proposal is not merged.

Comment 2

[Boris Chiou [:boris]]

Attachment: Bug 1754897 - Implement selector(#id) and none for source descriptor.

Based on the spec [1], source could be

1. selector( <id-selector> ),
2. auto, or
3. none.

We support auto already, so this patch addresses selector() and none.

Also, update wpt because start and end are obsolete, and use
assert_approx_equals() because we are using default scroll-offsets
(i.e. 0% 100%) and this may cause some calculation difference on
different CIs.

[1] https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-descriptors

Comment 3

[Boris Chiou [:boris]]

Based on the discussion in Matrix, we would like to implement the proposal way because the proposal spec will be finished soon (link: https://drafts.csswg.org/scroll-animations-1/rewrite#scroll-timelines-named)

Comment 4

[Boris Chiou [:boris]]

There is a spec issue which may block this bug: https://github.com/w3c/csswg-drafts/issues/7047

Comment 5

[Boris Chiou [:boris]]

Attachment: Bug 1754897 - Part 1: Support scroll-timeline-name longhand in style system.

Comment 6

[Boris Chiou [:boris]]

Attachment: Bug 1754897 - Part 2: Support scroll-timeline-axis longhand in style system.

Comment 7

[Boris Chiou [:boris]]

Attachment: Bug 1754897 - Part 3: Support scroll-timeline shorthand in style system.

Comment 8

[Boris Chiou [:boris]]

Attachment: Bug 1754897 - Part 4: Hook named scroll timelines to animation-timeline.

Comment 9

[Boris Chiou [:boris]]

Attachment: Bug 1754897 - Part 7: Update animations if the referenced scroll-timeline property gets changed.

Comment 10

[Boris Chiou [:boris]]

Attachment: Bug 1754897 - Part 5: Factor out the creation of ScrollTimeline object.

Comment 11

[Boris Chiou [:boris]]

Attachment: Bug 1754897 - Part 6: Add Scroller::Type to the HashMap key for ScrollTimeline.

Different types of scrollers may need some special manipulation, e.g. we would
like to look up a ScrollTimeline object which is created by scroll-timeline
property and update its associated animations (in this patch series).

Any we may need to handle some special cases for scroller(nearest) in the
future (e.g. Bug 1765211).

Comment 12

[Boris Chiou [:boris]]

Attachment: Bug 1754897 - Part 7: Factor out the check of PseudoStyleType for animations.

It seems we use it frequently, so move it to AnimationUtils.h.

Comment 14

[Phabricator Automation]

Comment on attachment 9277217 [details]
Bug 1754897 - Part 7: Update animations if the referenced scroll-timeline property gets changed.

Revision D146754 was moved to bug 1774060. Setting attachment 9277217 [details] to obsolete.

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/783c84b1fe1d
Part 1: Support scroll-timeline-name longhand in style system. r=emilio
https://hg.mozilla.org/integration/autoland/rev/d545afeeab51
Part 2: Support scroll-timeline-axis longhand in style system. r=emilio
https://hg.mozilla.org/integration/autoland/rev/555e14e928cf
Part 3: Support scroll-timeline shorthand in style system. r=emilio
https://hg.mozilla.org/integration/autoland/rev/b186ae5e1631
Part 4: Hook named scroll timelines to animation-timeline. r=emilio
https://hg.mozilla.org/integration/autoland/rev/b69bf028a316
Part 5: Factor out the creation of ScrollTimeline object. r=emilio
https://hg.mozilla.org/integration/autoland/rev/dc04d44c6184
Part 6: Add Scroller::Type to the HashMap key for ScrollTimeline. r=emilio
https://hg.mozilla.org/integration/autoland/rev/ec99acd78b32
Part 7: Factor out the check of PseudoStyleType for animations. r=emilio

Comment 16

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/34408 for changes under testing/web-platform/tests

Comment 19

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/783c84b1fe1d
https://hg.mozilla.org/mozilla-central/rev/d545afeeab51
https://hg.mozilla.org/mozilla-central/rev/555e14e928cf
https://hg.mozilla.org/mozilla-central/rev/b186ae5e1631
https://hg.mozilla.org/mozilla-central/rev/b69bf028a316
https://hg.mozilla.org/mozilla-central/rev/dc04d44c6184
https://hg.mozilla.org/mozilla-central/rev/ec99acd78b32

Comment 20

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 21

[Hamish Willee]

FYI Docs work for this can be tracked in https://github.com/mdn/content/issues/21069

My understanding is that:

1. This is behind the same pref as animation timelines - layout.css.scroll-linked-animations.enabled - correct?
2. The spec links here all appear to be broken. I found another here: https://drafts.csswg.org/scroll-animations-1/#scrolltimeline - is this the correct link?
3. This seems to cover everything in section 2 "Scroll progress Timelines. From the point of view of users is it anything other than:
   • CSS properties: scroll-timeline-name, scroll-timeline-axis, scroll-timeline
   • CSS scroll() notation
   • API/Interface ScrollTimeline

Comment 22

[Boris Chiou [:boris]]

(In reply to Hamish Willee from comment #21)

FYI Docs work for this can be tracked in https://github.com/mdn/content/issues/21069

My understanding is that:

1. This is behind the same pref as animation timelines - layout.css.scroll-linked-animations.enabled - correct?

Yes. I use this pref for all the implementation of scroll-linked animations.

2. The spec links here all appear to be broken. I found another here: https://drafts.csswg.org/scroll-animations-1/#scrolltimeline - is this the correct link?

The spec just got merged few weeks ago so no need to add "rewrite" in the link. And so should be this: https://drafts.csswg.org/scroll-animations-1/#scroll-timelines-named.
We support the declarative way only (i.e. CSS).

3. This seems to cover everything in section 2 "Scroll progress Timelines. From the point of view of users is it anything other than:
   • CSS properties: scroll-timeline-name, scroll-timeline-axis, scroll-timeline

This is covered in this bug. And Actually we only cover these three properties in this bug.

- CSS `scroll()` notation

This is covered in another bug, Bug 1737918.

- API/Interface [ScrollTimeline](https://drafts.csswg.org/scroll-animations-1/#scrolltimeline)

Actually, we are not planning to support the WebIDL API (i.e. https://drafts.csswg.org/scroll-animations-1/#scrolltimeline-interface). So this bug doesn't cover this.

So in other words, this bug covers only "&2.2 Named Scroll Progress Timelines" in https://drafts.csswg.org/scroll-animations-1/#scroll-timelines.

Comment 23

[Boris Chiou [:boris]]

Feel free to let my know if you need any simple example to demo these properties. :)

Comment 24

[Hamish Willee]

Feel free to let my know if you need any simple example to demo these properties. :)

Boris, thank you. What would be even better would be if you can tell me what I am doing wrong in my simple example of scroll-timeline. This is supposed to rotate a box as the scroll bar is moved:

• Source here: https://github.com/mdn/content/pull/21277/files#r986398717
• Rendered here: https://pr21277.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/scroll-timeline#examples

My understanding was that you applied the name and axis to the container, which between them identify a particular scrollbar as the timeline source. You then provide the name to the animation-timeline and it gets used. But that does not appear to work in my example.

Note, I did modify the CSS in https://wpt.live/scroll-animations/css/scroll-timeline-default.html in the same way and that worked, so I must be doing something dumb here.

In addition, a few questions:

1. When/why would you set a timeline as none? Isn't it then unusable?
2. If you don't supply a timeline name at all - either none or an ident, is none used?
3. Do you happen to know if Chrome or Safari implement these properties?
4. Other related documentation uses examples with @scroll-timeline. Am I correct in assuming that scroll-timeline is intended to replace this?

Comment 25

[Bramus]

(In reply to Hamish Willee from comment #24)

Feel free to let my know if you need any simple example to demo these properties. :)

Boris, thank you. What would be even better would be if you can tell me what I am doing wrong in my simple example of scroll-timeline. This is supposed to rotate a box as the scroll bar is moved:

• Source here: https://github.com/mdn/content/pull/21277/files#r986398717
• Rendered here: https://pr21277.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/scroll-timeline#examples

My understanding was that you applied the name and axis to the container, which between them identify a particular scrollbar as the timeline source. You then provide the name to the animation-timeline and it gets used. But that does not appear to work in my example.

The problem here is that you don’t have any scroll estate: the #container has no scrollbar.
If you force it to be – such as seen in this altered version – it does work fine (tested in Chrome Canary with Experimental Web Platform Features flag enabled)

In addition, a few questions:

1. When/why would you set a timeline as none? Isn't it then unusable?

Within a certain media query / container query it can make sense to remove the Scroll-Linked aspect.

2. If you don't supply a timeline name at all - either none or an ident, is none used?

The initial value for animation-timeline is auto, to associate it with the DocumentTimeline – https://drafts.csswg.org/css-animations-2/#propdef-animation-timeline

The initial value for scroll-timeline-name is none – https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-name

3. Do you happen to know if Chrome or Safari implement these properties?

Chrome is actively working on it (👋 Chrome DevRel here, hello!), with a few features already available in Crome Canary (107 and up) with Experimental Web Platform Features flag enabled. Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1317765

4. Other related documentation uses examples with @scroll-timeline. Am I correct in assuming that scroll-timeline is intended to replace this?

@scroll-timeline has been deprecated and is indeed replaced by a combination of scroll-timeline (to track a scroller’s progress) and view-timeline (to track a subject inside a scroller)

Comment 26

[Boris Chiou [:boris]]

Thanks for the comments, Bramus.

Other related documentation uses examples with @scroll-timeline. Am I correct in assuming that scroll-timeline is intended to replace this?

I expect we removed all the usage of @scroll-timeline from wpt already. If you see any usage of @scroll-timeline in Gecko, please ni me because we have removed the implementation of @scroll-timeline already in Bug 1789447.

Comment 27

[Hamish Willee]

Thank you so much - got it working as live example based on this: https://pr21277.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/scroll-timeline#examples

Should an animation with a timeline still require animation-duration? It appears to in this case.

Comment 28

[Boris Chiou [:boris]]

(In reply to Hamish Willee from comment #27)

Thank you so much - got it working as live example based on this: https://pr21277.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/scroll-timeline#examples

Should an animation with a timeline still require animation-duration? It appears to in this case.

Yes. zero duration has a different meaning. We treat it as 100%. (example: https://searchfox.org/mozilla-central/rev/80e1bfa13c954e6450a13b3cc802d82773eba2e0/testing/web-platform/tests/scroll-animations/css/progress-based-animation-animation-longhand-properties.tentative.html#77-83) because we normalize the animation-duration together with animation-delay to percentage values in the implementation.

So basically, just set a non-zero duration in MDN for now. We may introduce auto as the initial value in the future: https://github.com/w3c/csswg-drafts/issues/6530.

Comment 29

[Hamish Willee]

Thanks Boris. So the work for this is pretty much done, but waiting on review from various docs teams members. I'll keep the animation-duration stuff in mind as it is a little orthogonal to this work.