[scroll-animations-1] Add a way for timeline-scope to pull up all contained timelines · Issue #9158 · w3c/csswg-drafts (original) (raw)

(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)