Closed Bug 1676782 Opened 2 years ago Closed 1 year ago

Implement @scroll-timeline rule

Categories

(Core :: CSS Parsing and Computation, enhancement)

enhancement

Tracking

()

RESOLVED FIXED
94 Branch
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.

Blocks: 1676791
Type: task → enhancement
Assignee: nobody → boris.chiou
Status: NEW → ASSIGNED

Define the data structure for @scroll-timeline rule, the parsing code,
and the serialization.

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.

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.

It seems only effective_style_rules() and effective_viewport_rules() are
used. Let's drop used functions.

Attachment #9241695 - Attachment description: Bug 1676782 - Part 5: Drop the used effective_xxx_rules. → Bug 1676782 - Part 5: Drop the unused effective_xxx_rules.
Pushed by bchiou@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/952e6405c026
Part 1: Implement @scroll-timeline in style system. r=emilio
https://hg.mozilla.org/integration/autoland/rev/fda658ba3513
Part 2: Hook @scroll-timeline rule into style system. r=emilio
https://hg.mozilla.org/integration/autoland/rev/5f0805093847
Part 3: Add CSSScrollTimelineRule for CSSOM. r=emilio
https://hg.mozilla.org/integration/autoland/rev/6c4438e9e481
Part 4: Update wpt to match the spec, and enable the preference for wpt. r=emilio
https://hg.mozilla.org/integration/autoland/rev/35b8a93ca65b
Part 5: Drop the unused effective_xxx_rules. r=emilio
Failed to create upstream wpt PR due to merge conflicts. This requires fixup from a wpt sync admin.
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/30886 for changes under testing/web-platform/tests
Upstream PR merged by moz-wptsync-bot

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

I think the syntax chrome implements is an old version of the spec, Boris can confirm.

Flags: needinfo?(boris.chiou)

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

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 to progress
  • 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?

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.

Flags: needinfo?(boris.chiou)

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.

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!

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