Closed Bug 1737920 Opened 2 years ago Closed 11 months ago

Support Named View Progress Timelines

Categories

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

enhancement

Tracking

()

RESOLVED FIXED
114 Branch
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)

Depends on: 1808409
Summary: Support view-timeline for element's in-view timeline → Support Named View Progress Timelines
Depends on: 1814786
Depends on: 1815975
Blocks: 1817073

We temporarily comment out the look up of view-timeline-name.

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.

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.

Assignee: nobody → boris.chiou
Status: NEW → ASSIGNED
Attachment #9318022 - Attachment is obsolete: true
Attachment #9318007 - Attachment description: Bug 1737920 - Part 4: Enable (wip). → Bug 1737920 - Part 4: Look up named view timeline for CSS animations and update WPT expectations.
Blocks: 1818346
Attachment #9318007 - Attachment description: Bug 1737920 - Part 4: Look up named view timeline for CSS animations and update WPT expectations. → Bug 1737920 - Part 3: Look up named view timeline for CSS animations and update WPT expectations.

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.

Attachment #9318006 - Attachment is obsolete: true
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
Status: ASSIGNED → RESOLVED
Closed: 11 months ago
Resolution: --- → FIXED
Target Milestone: --- → 114 Branch
Upstream PR merged by moz-wptsync-bot

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.

Flags: needinfo?(boris.chiou)

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

Flags: needinfo?(boris.chiou)
You need to log in before you can comment on or make changes to this bug.