Support Named Scroll Progress Timelines
Categories
(Core :: CSS Transitions and Animations, enhancement, P3)
Tracking
()
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:
scroll-timeline-name
longhand property, https://drafts.csswg.org/scroll-animations-1/rewrite#scroll-timeline-namescroll-timeline-axis
longhand property, https://drafts.csswg.org/scroll-animations-1/rewrite#scroll-timeline-axisscroll-timeline
shorthand property, https://drafts.csswg.org/scroll-animations-1/rewrite#scroll-timeline-shorthand
Assignee | ||
Updated•3 years ago
|
Comment hidden (obsolete) |
Assignee | ||
Updated•3 years ago
|
Comment hidden (obsolete) |
Assignee | ||
Updated•3 years ago
|
Assignee | ||
Comment 3•3 years ago
•
|
||
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)
Assignee | ||
Updated•3 years ago
|
Updated•3 years ago
|
Assignee | ||
Comment 4•2 years ago
|
||
There is a spec issue which may block this bug: https://github.com/w3c/csswg-drafts/issues/7047
Assignee | ||
Comment 5•2 years ago
|
||
Assignee | ||
Comment 6•2 years ago
|
||
Assignee | ||
Comment 7•2 years ago
|
||
Assignee | ||
Comment 8•2 years ago
|
||
Assignee | ||
Comment 9•2 years ago
|
||
Updated•2 years ago
|
Updated•2 years ago
|
Assignee | ||
Comment 10•2 years ago
|
||
Updated•2 years ago
|
Assignee | ||
Comment 11•2 years ago
|
||
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).
Updated•2 years ago
|
Comment 14•2 years ago
|
||
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.
Updated•2 years ago
|
Comment 15•2 years ago
|
||
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
Comment 19•2 years ago
|
||
bugherder |
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
Upstream PR merged by moz-wptsync-bot
Comment 21•2 years ago
|
||
FYI Docs work for this can be tracked in https://github.com/mdn/content/issues/21069
My understanding is that:
- This is behind the same pref as animation timelines -
layout.css.scroll-linked-animations.enabled
- correct? - 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?
- 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
- CSS properties:
Assignee | ||
Comment 22•2 years ago
|
||
(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:
- 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.
- 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).
- 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.
Assignee | ||
Updated•2 years ago
|
Assignee | ||
Comment 23•2 years ago
|
||
Feel free to let my know if you need any simple example to demo these properties. :)
Comment 24•2 years ago
•
|
||
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:
- When/why would you set a timeline as
none
? Isn't it then unusable? - If you don't supply a timeline name at all - either none or an ident, is
none
used? - Do you happen to know if Chrome or Safari implement these properties?
- Other related documentation uses examples with
@scroll-timeline
. Am I correct in assuming thatscroll-timeline
is intended to replace this?
Comment 25•2 years ago
|
||
(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:
- 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.
- 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
- 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
- Other related documentation uses examples with
@scroll-timeline
. Am I correct in assuming thatscroll-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)
Assignee | ||
Comment 26•2 years ago
|
||
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•2 years ago
|
||
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.
Assignee | ||
Comment 28•2 years ago
|
||
(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•2 years ago
|
||
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.
Description
•