[scroll-animations-1] Add a way for timeline-scope to pull up all contained timelines

[bramus]

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

[ydaniv]

This will make the lives of library authors and authoring tools so much simpler! In such cases you would probably always start from all at the top, and only add opt-in lower scope boundaries as needed.

Which makes me wonder, perhaps this should be in the UA's stylesheet on the root?

[bramus]

Which makes me wonder, perhaps this should be in the UA's stylesheet on the root?

That could lead to unwanted side-effects in case a name is (accidentally) reused across different components on the page.

[kizu]

I was thinking about it: I wonder if, alongside all, we'd also want to have some way to exclude some of the names? Basically “all except”.

Use case: we could want to set up a catch-all scope for all the dynamic scopes we could set up, but then we would know that we would have some elements that want to pass their scope through, so we would want to not scope some list of other known scopes.

I'm not sure what the potential proposed syntax could be. Something like timeline-scope: all except(--foo, --bar)?

[bramus]

Something like timeline-scope: all except(--foo, --bar)?

Looks like something more of an issue for additive cascade to solve.

[kizu]

Looks like something more of an issue for additive cascade to solve.

Hmm, I'm not sure if I see how this could help here?

What I'm talking about is cases like this:

<div class="a" timeline-scope: --d>
    <div class="b" style="timeline-scope: all except(--d)">
        <div class="c" style="timeline-view: --c1"></div>
        <div class="c" style="timeline-view: --c2"></div>
        …
        <div class="d" style="timeline-view: --d"></div>
    </div>
    <div class="e"></div>
</div>

Where we could want to have timeline-scope: all on the .b, so it would encapsulate the scope of all the timelines defined in .c, names of which we don't know in advance, but then we could have a different timeline on the .d which we would want to reuse outside .c, scoping it to the .a

With just all it would prevent the --d from being scoped on the .a, and the only alternative we would have right now is to mention all the --c1, --c2 etc. explicitly on the .b, thus the need for a way to have “all except”.

I don't think this is possible with additive cascade, as it would require us to have actual rules targeting the .b element which would add the --c1, --c2 etc. in separate declarations, but that won't be possible from inline CSS or via a case where we don't know what exactly would scope our timeline, so we wouldn't know where to make the additions.

[bramus]

Hmm, I'm not sure if I see how this could help here?

Syntax of how exactly to remove some value, you’d have two timeline-scope declarations. One that sets the value to all, and one that removes --d. Using the fictitious :- as a way to remove a value, that would look like:

<div class="b" style="timeline-scope: all; timeline-scope:- --d;">

However, now that I’ve written the above: that would still require some way of actually computing that to “all except --d”. Hmm. 🤔

My suggestion here would be to split off this requested except() behavior, so that we can resolve on adding all as a keyword. Afterwards, we can think on how to exclude certain values, which could also be applied to anchoring. I’m assuming except() would be a pretty niche feature, with limited use-cases, whereas all is a more broader/common feature.

[kizu]

I'm ok with splitting it — it is for sure something that can be added later, and all is a much more needed thing.

Given we'd have a bunch of other places that could potentially have scoping with the all keyword (like the potential anchor-scope), maybe that is something that could be considered later separately as a feature for any similar kind of scoping we could do in CSS.

[css-meeting-bot]

The CSS Working Group just discussed [scroll-animations-1] Add a way for timeline-scope to pull up all contained timelines.

The full IRC log of that discussion

[css-meeting-bot]

The CSS Working Group just discussed [scroll-animations-1] Add a way for timeline-scope to pull up all contained timelines, and agreed to the following:

• RESOLVED: Add 'all' keyword to 'timeline-scope', equivalent to specifying all possible names

The full IRC log of that discussion

<YehonatanDaniv> bramus: this issue is about declaring many animation timelines and using broader scope
<YehonatanDaniv> ... this issue is about using "all" for hoisting them up
<flackr> q+
<YehonatanDaniv> ... allow also anchor name for hoisting up using anchor scope
<Rossen_> ack flackr
<YehonatanDaniv> flackr: can a timeline be pooled up with multiple scope
<YehonatanDaniv> fantasai: no
<fantasai> s/pooled/pulled/
<bramus> s/pooled/pulled/
<fantasai> scribenick: fantasai
<fantasai> fantasai: the 'all' keyword traps all the keywords, just like individual keywords trap those keywords
<fantasai> ... might be useful if you want to encapsulate
<fantasai> flackr: ok
<fantasai> Rossen_: any other concerns?
<fantasai> bramus: proposed to add "all" which will pull up all timelines
<fantasai> (It's basically the same as specifying all possible names)
<schenney> The concern raised by flackr is already in the issue, raised by https://github.com//issues/9158#issuecomment-1742797028
<fantasai> YehonatanDaniv: if I name something in a descendant, and then specify all in an ancestor, what happens?
<fantasai> flackr: the lower scope captures that name, it won't be pulled higher up
<fantasai> RESOLVED: Add 'all' keyword to 'timeline-scope', equivalent to specifying all possible names