Support Named View Progress Timelines
Categories
(Core :: CSS Transitions and Animations, enhancement, P3)
Tracking
()
Tracking | Status | |
---|---|---|
firefox114 | --- | fixed |
People
(Reporter: boris, Assigned: boris)
References
(Blocks 3 open bugs, )
Details
(Keywords: dev-doc-complete)
Attachments
(3 files, 2 obsolete files)
Comment hidden (obsolete) |
Assignee | ||
Updated•2 years ago
|
Assignee | ||
Updated•2 years ago
|
Assignee | ||
Comment 2•2 years ago
|
||
Assignee | ||
Comment 3•2 years ago
|
||
Basically, we pass the subject rect (in CSSPixel) and the resolved
insets to the compositor thread, and use the viewport size from APZ, to
calculate the offsets in the compositor thread.
Assignee | ||
Comment 5•2 years ago
|
||
So it'd be easier to introduce view timelines by overriding ComputeOffsets().
Basically, we use offsets to control the animation progress.
For scroll-timeline, it's simply 0 to the scroll range.
For view-timeline, its progress is between 0% and 100% if the subject element
is in the view. Otherwise, its progress is outside the range. We will
implement the offset calculation of view-timeline in Bug 1737920.
Updated•2 years ago
|
Updated•2 years ago
|
Updated•2 years ago
|
Updated•2 years ago
|
Comment 6•2 years ago
|
||
Comment on attachment 9318006 [details]
Bug 1737920 - Part 3: Support view-timeline in the compositor thread.
Revision D170003 was moved to bug 1818346. Setting attachment 9318006 [details] to obsolete.
Pushed by bchiou@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/a6ea19bea427 Part 1: Create ViewTimeline when specifying view-timeline property. r=emilio https://hg.mozilla.org/integration/autoland/rev/4f3a89f4e5c2 Part 2: Calculate offsets for ViewTimeline. r=emilio https://hg.mozilla.org/integration/autoland/rev/15841f7c7d94 Part 3: Look up named view timeline for CSS animations and update WPT expectations. r=emilio
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/39509 for changes under testing/web-platform/tests
Comment 9•1 year ago
|
||
bugherder |
https://hg.mozilla.org/mozilla-central/rev/a6ea19bea427
https://hg.mozilla.org/mozilla-central/rev/4f3a89f4e5c2
https://hg.mozilla.org/mozilla-central/rev/15841f7c7d94
Upstream PR merged by moz-wptsync-bot
Comment 11•1 year ago
•
|
||
Is this feature complete, I have added the layout.css.scroll-driven-animations.enabled
and it does not seem to be working.
I am using this codepen, to test the expected behaviour. I can see this working in Chrome Canary.
Assignee | ||
Comment 12•1 year ago
•
|
||
(In reply to Dave Letorey from comment #11)
Is this feature complete, I have added the
layout.css.scroll-driven-animations.enabled
and it does not seem to be working.
I am using this codepen, to test the expected behaviour. I can see this working in Chrome Canary.
We don't support animation-duration: auto
because it is defined in CSS Animation Level 2, so please use any duration other than 0s. (Bug 1804574)
Also, the named timeline range is not supported because it should go to CSS Animation Level 2. There is a bug for it: Bug 1824875.
If you remove the named keyframe selectors (e.g. Just use 0%
and 100%
) and use 1s
for the duration, the scroll-driven animation should work.
Updated•1 year ago
|