Closed Bug 1754897 Opened 2 years ago Closed 2 years ago

Support Named Scroll Progress Timelines

Categories

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

Unspecified
All
enhancement

Tracking

()

RESOLVED FIXED
103 Branch
Tracking Status
firefox103 --- fixed

People

(Reporter: boris, Assigned: boris)

References

(Blocks 2 open bugs, )

Details

(Keywords: dev-doc-complete)

Attachments

(7 files, 3 obsolete files)

48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review

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
Status: NEW → ASSIGNED
Blocks: 1746094
Summary: Support specific scroll container for source descriptor → Support specific scroll container for scroll progress timeline

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)

Blocks: 1733260
No longer blocks: css-scroll-driven-animations, 1737918
Summary: Support specific scroll container for scroll progress timeline → Support Named Scroll Progress Timelines
Attachment #9263836 - Attachment is obsolete: true

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

No longer blocks: 1746094
Keywords: dev-doc-needed
Attachment #9276527 - Attachment description: Bug 1754897 - Part 4: Support named scroll timelines when updating animations. → Bug 1754897 - Part 4: Hook named scroll timelines to animation-timeline.
Attachment #9277217 - Attachment description: Bug 1754897 - Part 5: Update the associated ScrollTimelines during traversal. → Bug 1754897 - Part 5: Update the associated animation timelines if scroll-timeline property gets changed.
Attachment #9277217 - Attachment description: Bug 1754897 - Part 5: Update the associated animation timelines if scroll-timeline property gets changed. → Bug 1754897 - Part 6: Update the associated animation timelines if scroll-timeline property gets changed.

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

Attachment #9277217 - Attachment description: Bug 1754897 - Part 6: Update the associated animation timelines if scroll-timeline property gets changed. → Bug 1754897 - Part 7: Update animations if the referenced scroll-timeline property gets changed.

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

Blocks: 1774060

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.

Attachment #9277217 - Attachment is obsolete: true
Attachment #9278961 - Attachment description: Bug 1754897 - Part 8: Factor out the check of PseudoStyleType for animations. → Bug 1754897 - Part 7: Factor out the check of PseudoStyleType for animations.
Pushed by bchiou@mozilla.com:
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
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/34408 for changes under testing/web-platform/tests
Upstream PR merged by moz-wptsync-bot

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
Flags: needinfo?(boris.chiou)

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

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

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

Flags: needinfo?(boris.chiou)

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:

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?
Flags: needinfo?(boris.chiou)

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

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.

  1. 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 DocumentTimelinehttps://drafts.csswg.org/css-animations-2/#propdef-animation-timeline

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

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

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

Flags: needinfo?(boris.chiou)

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.

You need to log in before you can comment on or make changes to this bug.