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

In true staircase wit, thinking things over last night, I would like to reconsider – at least discuss things a bit more.

As it stands now, with `scroll-timeline-attachment`, an author needs to do three adjustments to hook onto a scroller that’s not a parent:

1. Find a common ancestor and duplicate the `scroll-timeline-name` there
2. Set `scroll-timeline-attachment` to `defer` on that ancestor
3. Set `scroll-timeline-attachment` to `ancestor` on the scroller

This is pretty verbose imo, and I think this should be shorter. Only step 1 should be necessary.

Looking at [CSS Toggles](https://tabatkins.github.io/css-toggle/), it uses [a `toggle-root` property](https://tabatkins.github.io/css-toggle/#toggle-root-property) to establish a toggle. Maybe we could use something similar for Scroll Timelines, e.g. `scroll-timeline-root`?

With it, only one adjustment would be needed by authors:

1. Find a common ancestor and set the `scroll-timeline-root` there

Reworking flackr’s example, the resulting code would then look like this:

```css
<style>
#parent {
  scroll-timeline-root: scroller; /* Establish scope for `scroller` */
}
#scroller {
  scroll-timeline-name: scroller;
}
#animated {
  animation-timeline: scroller;
}
</style>

<div id="parent">
  <div>
    <div id="animated"></div>
  </div>
  <div id="scroller"></div>
</div>
```

Added benefit is that there’s less room for confusion: by using a separate property, you can easily see you’re only declaring the scroll-timeline.

For author convenience, we can maybe also reconsider for the lookup of timelines to remain _“up and out”_ instead of ancestors only? That way no `scroll-timeline-root` is needed when attaching to a preceding sibling.


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


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

Received on Tuesday, 21 March 2023 08:33:28 UTC