Re: [csswg-drafts] [scroll-animations] Broader scope of scroll timelines (#7759)

> _[#](https://github.com/w3c/csswg-drafts/issues/7759#issuecomment-1517338318)_ But what about other possibilities? Going back to @bramus’s [proposal](https://github.com/w3c/csswg-drafts/issues/7759#issuecomment-1477443523), keeping `scroll-timeline-name` and `scroll-timeline-axis` as they are and introducing a name-scoping property like `scroll-timeline-scope: <custom-ident>#` would make sense to me. The basic case is still basic, and an additional feature enables extended scoping. I think this is also very easy to use.
> 
> The main downside to it: it doesn't have the double-handshake that `scroll-timeline-attachment` has.

I personally don’t consider this double-handshake to be essential but assuming it is: what if we went for a hybrid approach of the current proposals?

- Keep `scroll-timeline-name` and `scroll-timeline-axis` as they are right now.
- Use `scroll-timeline-scope: <custom-ident>#` _(or `scroll-timeline-root: <custom-ident>#`)_ to create a scope for a timeline with that name.
- Use `scroll-timeline-attachment: <custom-ident>#` to attach to that scope.

Note that I’ve adjusted `scroll-timeline-attachment` here to require a `<custom-ident>` instead of a keyword like `ancestor`. Its value would link up the `scroll-timeline-attachment` to the `scroll-timeline-scope`, enabling the double opt-in and thereby addressing fantasai’s concern.

Code example:

```css
.shared-parent {
  scroll-timeline-scope: scroller; /* establish scope */
}

.shared-parent .scroller {
  scroll-timeline: scroller inline;
  scroll-timeline-attachment: scroller; /* Refers to the scroll-timeline-scope’s <custom-ident> */
}

.shared-parent .scroller + .subject {
  animation-timeline: scroller; /* Looks for a scroll-timeline-name with that <custom-ident>. It can be found because scroll-timeline-scope on the .shared-parent has it linked. */
}
```

I think this is also in line with other specs, such as [Anchor Positioning](https://drafts.csswg.org/css-anchor-position-1/), where you have to explicitly refer to another _thing_ by its `<custom-ident>` _(or `<dashed-ident>` in the case of anchoring)_. That leaves no room for confusion or guessing, while allowing jumping over nodes.

A disadvantage though is that technically the `scroll-timeline-scope` and `scroll-timeline-name` can differ from each other as the former is linked from `scroll-timeline-attachment` and the latter from `animation-timeline` … unless it’s enforced in the spec that they all must be the same.

The `scroll-timeline-attachment` could be included in the shorthand as follows …

```
scroll-timeline: [ <scroll-timeline-name> <scroll-timeline-attachment>? <scroll-timeline-axis>? ]#
```

… but it might feel pretty redundant to see a double `<custom-ident>` then:

```css
.shared-parent {
  scroll-timeline-scope: scroller;
}

.shared-parent .scroller {
  scroll-timeline: scroller scroller inline;
}

.shared-parent .scroller + .subject {
  animation-timeline: scroller;
}
```

Rinse and repeat for `view-timeline-*`.

-- 
GitHub Notification of comment by bramus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7759#issuecomment-1517687735 using your GitHub account


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

Received on Friday, 21 April 2023 11:33:04 UTC