scroll-timeline-cssom.tentative.html would be automated tests for this.

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.

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

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.

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.

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!