Repository navigation
timelines are now global by default #46197
Description
MDN URL
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/timeline-scope
What specific section or headline is this issue about?
Examples
What information was incorrect, unhelpful, or incomplete?
The example is supposed to show how to use timeline-scope to allow an element to be animated by the scrolling of another element that isn't the first element's ancestor. But it doesn't. If you remove the timeline-scope declaration altogether, the example works just the same. We need to look into why this is and provide an updated example. I suspect the scoping provided by timeline-scope works similarly to https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/trigger-scope.
We also need to check the description of timeline-scope to make sure it is accurate.
What did you expect to see?
An example that demonstrates the effect of timeline-scope.
Do you have any supporting links, references, or citations?
I tested it in MDN Playground.
Do you have anything more you want to share?
No response
MDN metadata
Page report details
- Folder:
en-us/web/css/reference/properties/timeline-scope - MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/timeline-scope
- GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/reference/properties/timeline-scope/index.md
- Last commit: 2a3061b
- Document last modified: 2026-09-14T15:38:31.000Z
Activity
Josh-Cena commentedon Oct 29, 2026
@chrisdavidmills How did you test this? I commented out
timeline-scope: --my-scroller;in MDN playground, and now scrolling the pink area doesn't do anything. Perhaps your playground didn't refresh after the change?This is Chrome 156.
chrisdavidmills commentedon Oct 29, 2026
Ah, interesting. I tested it the same way you did, but in the latest Chrome Canary and Firefox Nightly. In both of those, when you comment out
timeline-scope: --my-scroller;, scrolling the pink box still animates the purple box. I've just observed the same behavior as you in Chrome 156, so it looks like the behavior has changed.Josh-Cena commentedon Oct 30, 2026
Looks like it was changed. w3c/csswg-drafts#12581 (comment) Names are now global by default, so
timeline-scopeonly serves to restrict scopes, not expand them. We would need to demonstrate how it can scope two timelines that would otherwise be conflicting. It's still Canary-only in Chrome since 146.[-]Example on timeline-scope ref page doesn't seem to demonstrate effect of timeline-scope[/-]