(Branching off from #8915 here, where @flackr suggested timeline-scope: all on the call)

This proposal is to add a way for timeline-scope to pull up all contained timelines using a single property value.

Use-case is when you have a set of elements that need to sync to another set (with the same size) of elements. Think of navigation indicators, typically implemented using a “scrollspy”. Authors can nowadays do this using Scroll-Driven Animations (see this demo by @kizu).

.parent > nav {
  li {
   animation: activate linear both;
  }

  li:nth-child(1) { animation-timeline: --tl-1; }
  li:nth-child(2) { animation-timeline: --tl-2; }
  li:nth-child(3) { animation-timeline: --tl-3; }
}

.parent > .content {
  div:nth-child(1) { view-timeline: --tl-1; }
  div:nth-child(2) { view-timeline: --tl-2; }
  div:nth-child(3) { view-timeline: --tl-3; }
}

To pull up the visibility of the contained timelines up to a shared parent, authors need to set the timeline-scope property’s value to include those names. This can be quite repetitive and is brittle to maintain.

.parent {
  timeline-scope: --tl-1, --tl-2, --tl-3, --tl-4, …, --tl-n; /* 👈 Ugh! */
}

An easier way out, would be to allow a keyword such as all as the value for timeline-scope. That way, all timelines in view of that element would be pulled up.

.parent {
  timeline-scope: all;
}

This addition would simplify all this for authors.

(The rest of the code – the first snippet posted – can be simplified using the proposal in #9141)