In CSS, how do scroll-timeline-name and timeline-scope let an element be animated by a scroll container that is not one of its ancestors?

## The limitation named timelines solve `animation-timeline: scroll()` creates an anonymous timeline whose scroller is found by lookup from the animated element: `nearest` walks up the ancestor chain, `self` means the element itself, `root` means the document scroller. All three are vertical relationships. Nothing in that syntax can express "the scroll container over *there*". That matters constantly in real layouts. A scroll indicator sits outside the panel it describes. A progress rail lives in a header while the content scrolls in a `<main>` beside it. A caption animates from an image's visibility while sitting in a different column. ## Naming a timeline You name a timeline on the element that *defines* it — the scroll container for a scroll timeline, the subject for a view timeline. Names are `<dashed-ident>` values, the same `--foo` form as custom properties: ```css .gallery { overflow-x: auto; scroll-timeline-name: --gallery; scroll-timeline-axis: inline; } ``` `scroll-timeline` is the shorthand for those two, so `scroll-timeline: --gallery inline` says the same thing. The view-timeline family mirrors it: `view-timeline-name`, `view-timeline-axis`, `view-timeline-inset`, and the `view-timeline` shorthand. On the consuming side you simply reference the name: ```css .indicator { animation: slide linear; animation-timeline: --gallery; } ``` ## Where the name is visible A timeline name is not global. It is resolvable within the subtree of the element that declared it — descendants can see it, and everything outside that subtree cannot. So the pattern above works when `.indicator` is *inside* `.gallery`, and quietly fails when it is a sibling. "Quietly" is the operative word. An unresolvable name does not raise an error and does not fall back to the document timeline; the animation is attached to an inactive timeline and never progresses. The element just sits at its base styles, which is why this failure eats debugging time. ## timeline-scope hoists the name `timeline-scope` is the escape hatch. Declared on an element with a list of names, it makes those names resolvable throughout that element's subtree, even though the timelines themselves are declared further down: ```css .section { timeline-scope: --gallery; } .gallery { overflow-x: auto; scroll-timeline: --gallery inline; } .indicator{ animation: slide linear; animation-timeline: --gallery; } ``` Now `.gallery` and `.indicator` can be siblings inside `.section`, and both resolve `--gallery` against the same timeline. The rule of thumb: put `timeline-scope` on the nearest element that contains both the timeline's definition and every consumer of it. It accepts a comma-separated list, so one ancestor can hoist several names at once, and `none` is the initial value. ## Failure modes worth knowing - **Name declared but never scoped, consumer outside the subtree.** The classic silent failure above. - **Two elements claiming the same name inside one scope.** With more than one timeline matching a scoped name, the name resolves to an inactive timeline rather than picking a winner — so a name applied to every item in a list, rather than to one element, breaks instead of working "for each". - **The scroller does not scroll on the named axis.** `scroll-timeline-axis: inline` on a container that only overflows vertically yields an inactive timeline for the same reason a bare `scroll()` would. - **The `animation` shorthand written after `animation-timeline`.** It resets the timeline to `auto`, and the symptom — the animation running once on load — looks nothing like a scoping problem. ## Naming versus anonymous Prefer anonymous `scroll()` or `view()` when the relationship really is ancestral, because there is nothing to keep in sync. Reach for names when the two elements are in different branches, when several unrelated elements must share one timeline, or when you want the timeline defined once in a component's root rule and consumed by a part deeper in a different subtree. The cost is a name that has to stay unique within its scope and a `timeline-scope` declaration that has to sit on the right ancestor — both easy to break during a refactor that moves markup around, which is a fair thing to point out in an interview.