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

bramus has just created a new issue for https://github.com/w3c/csswg-drafts:

== [scroll-animations-1] Add a way for timeline-scope to pull up all contained timelines ==
_(Branching off from https://github.com/w3c/csswg-drafts/issues/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](https://kizu.dev/scroll-driven-animations/#solution-using-timeline-scope) by @kizu)_.

```css
.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.

```css
.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.

```css
.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 https://github.com/w3c/csswg-drafts/issues/9141)_


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9158 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 3 August 2023 18:46:25 UTC