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

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)

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

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).

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

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.

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

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

(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.

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

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?

(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)

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.

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.

(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.

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.