Implement @scroll-timeline rule
Categories
(Core :: CSS Parsing and Computation, enhancement)
Tracking
()
Tracking | Status | |
---|---|---|
firefox94 | --- | fixed |
People
(Reporter: hiro, Assigned: boris)
References
(Blocks 1 open bug, )
Details
(Keywords: dev-doc-complete)
Attachments
(5 files)
scroll-timeline-cssom.tentative.html would be automated tests for this.
Reporter | ||
Updated•4 years ago
|
Updated•4 years ago
|
Assignee | ||
Updated•4 years ago
|
Assignee | ||
Comment 1•3 years ago
|
||
Define the data structure for @scroll-timeline rule, the parsing code,
and the serialization.
Assignee | ||
Comment 2•3 years ago
|
||
We add scroll-timeline rule into the stylesheet rule type, and add a new
perference to protect it: layout.css.scroll-linked-animations.enabled.
We will use this perference for animation-timeline property as well.
Assignee | ||
Comment 3•3 years ago
|
||
Implement CSSScrollTimelineRule CSSOM API.
https://drafts.csswg.org/scroll-animations-1/#the-css-scroll-timeline-rule-interface
We rely on the CSSOM API for testing. However, the wpt doesn't match the
current spec and it has some errors. We update the wpt and enable the
preference for testing in the next patch.
Assignee | ||
Comment 4•3 years ago
|
||
Assignee | ||
Comment 5•3 years ago
|
||
It seems only effective_style_rules() and effective_viewport_rules() are
used. Let's drop used functions.
Updated•3 years ago
|
Comment 7•3 years ago
|
||
bugherder |
https://hg.mozilla.org/mozilla-central/rev/952e6405c026
https://hg.mozilla.org/mozilla-central/rev/fda658ba3513
https://hg.mozilla.org/mozilla-central/rev/5f0805093847
https://hg.mozilla.org/mozilla-central/rev/6c4438e9e481
https://hg.mozilla.org/mozilla-central/rev/35b8a93ca65b
Comment 11•3 years ago
|
||
Hi - I'm writing up the @scroll-timeline page for MDN and I'm wondering if this has been implemented in FF94. The reason I ask is I whipped up a quick demo which works ok in Chrome, but not in Beta 94 or Nightly 95 (layout.css.scroll-linked-animations.enabled preference is set to true in both)
This is the minimal CSS
@scroll-timeline move-timeline {
source: auto;
orientation: vertical;
scroll-offsets: 0px, 500px;
}
@keyframes move-animation {
from {
transform: translateX(0px);
}
to {
transform: translateX(800px);
}
}
#left-circle {
animation-name: move-animation;
animation-duration: 3s;
animation-direction: alternate;
animation-timeline: move-timeline;
}
If anyone could enlighten me that would be great - thank you
Comment 12•3 years ago
|
||
I think the syntax chrome implements is an old version of the spec, Boris can confirm.
Comment 13•3 years ago
•
|
||
Thanks Emilio :) The initial Chrome implementation included a time-ranges
property, however this changed on my last update (95) and the above code works without it 👍
Also to note I haven't touched the docs for the interface yet, just the @ rule
Comment 14•3 years ago
|
||
Using Firefox 95.0a1 (2021-10-25) (64-bit) (Mac) with layout.css.scroll-linked-animations.enabled
set to true
, I must say I also can't get any of my demos working.
Take https://codepen.io/bramus/pen/WNGLpyV for example: the animation simply runs on load.
I've tried all of these, but they all have no effect:
- Removing
time-range
(which is merely there for Chrome who needs it) - Explicitly adding
scroll-offsets: 0, 100%;
- Moving the
@scroll-timeline
declaration outside of the@supports
block - Renaming the timeline from
progress-timeline
toprogress
- Splitting the
animation
shorthand into their own properties - …
The code shared by rjohn above also does not work for me. Not in v94 nor v95.
Is this Mac specific?
Do I need to enable an extra flag other than layout.css.scroll-linked-animations.enabled
?
Assignee | ||
Comment 15•3 years ago
•
|
||
Firefox accepts @scroll-timeline rule for parsing and serialization (via CSSOM), but now there is no visual effect with the @scroll-timeline rule because I'm still working on animation support in Bug 1676791. So In Bug 1676791, I am trying to make sure Firefox runs scroll-linked animation for the default source and scroll-offsets, e.g.
@scroll-timeline move-timeline {
source: auto;
orientation: vertical;
scroll-offsets: none;
}
@keyframes move-animation {
from {
transform: translateX(0px);
}
to {
transform: translateX(800px);
}
}
#left-circle {
animation-name: move-animation;
animation-duration: 3s;
animation-direction: alternate;
animation-timeline: move-timeline;
}
I work on this only for default source
and scroll-offsets
because it seems https://github.com/w3c/csswg-drafts/issues/6674 will change the syntax again, and the spec proposal assumes the timeline goes from 0% to 100% always, and the source is root, nearest element, or the element which has <container-name>
(note: the <container-name>
CSS property is not supported in Firefox).
I'm still writing some tests to verify my implementation in Bug 1676791, so would you mind waiting for Bug 1676791? Once it lands, if you still see some bugs, please let me know. Thanks for writing the MDN documentation.
Comment 16•3 years ago
|
||
there is no visual effect with the @scroll-timeline rule because I'm still working on animation support in Bug 1676791.
Ah, I see. Didn't fully understand that this issue here only targets the parsing part. Thanks for the clarification there, Boris.
Comment 17•3 years ago
|
||
Thank you so much Boris! This is incredibly helpful.
I'll need to check the interface docs as it seems they will need doing as well (not just the @ rule). I'm going to add the dev-doc-needed
keyword to the other bug so I can track it.
Thanks!
Description
•