Bug 1676782 Comment 15 Edit History

Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.

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 run scroll-linked animation for the default source and scroll-offsets, e.g.
```css
@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 it 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.
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.
```css
@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 it 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.
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.
```css
@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.

Back to Bug 1676782 Comment 15