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

> Since we're not stuck with the prior properties yet, I think we should redesign slightly to better accommodate the model as we now understand it.

I think it's good to take this approach to thinking about the problem space, and I appreciate that you're doing it. :)

<hr>

Btw, I will note that I just committed a bunch of editorial work to the [PR for this proposal](https://github.com/w3c/csswg-drafts/pull/8680), based on the summary you made for me when you were commenting that it was confusing. I really liked that summary :) so I'm going to quote it here:

”So just making sure I understand: you can (a) create a timeline, with a name, and (b) provide a scroller that the timeline can reference. A name, once created, is visible to the element and its descendants. 'local' does both (a) and (b), attaching to the element's own scroller. 'defer' only does (a), creating the name. 'ancestor' only does (b), providing the scroller and attaching it to a specified name from an ancestor. Right?”

I'm hoping the updated spec text is a lot easier to understand.

<hr>

> A third possibility (sorry for the options) - do we actually need longhands here?

Yes, actually, I think it's reasonable that someone might want to cascade the axis independently of the name: the name is more of a structural/markup thing, but the axis needs to correspond to how you're laying out the content of the scroller.

(That does bring up the question of if we can auto-determine the axis... filed https://github.com/w3c/csswg-drafts/issues/7749.)

> scroll-timeline: foo; creates a foo timeline, but doesn't attach a scroll axis to it; it's assumed a descendant will do so

So I want to rewind you a bit: you've gone and grokked the underlying model we're using, and now you're trying to translate it into syntax.

But what I'd rather do is design this from a **use-case-first perspective**. And the most basic use cases are the ones that both declare and define a timeline on a single element. We should be optimizing for making that easy to do and easy to understand.

Detaching these two operations onto multiple elements is advanced stuff. We should make it comprehensible also, but it shouldn't be interfering with **making the common case as simple and straightforward as possible**.

The two operations the basic case is interested in is: name the timeline (and let the scoping fall out of that) and choose its axis, defaulting appropriately. Even if all you do is give a name, you get a timeline you can use!

Now for the complex case: we could add a keyword to one of these two properties (name, axis). But that complexifies what the property represents (name, axis) to the author. On the other hand, having properties that apply in some context and not others is all over CSS, so ignoring -attachment or ignoring -axis depending what you're trying to do is pretty normal.

And having a shorthand that lets you specify any relevant combination makes them all convenient to use.

So even though I agree with you that it's good to review the whole house, so to speak, and not just the extension; I think I like the current design better than the other ones you proposed. :)

<hr>

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. Currently timeline scopes nest by default, each hiding matching names on any ancestors, which works well to avoid name clashes with a nested component structure. But since Bramus’s proposal has an implied ancestor attachment, by adding -scope on an ancestor you can end up with multiple descendants all using the same name, and therefore conflicting in trying to attach to that scope root... which invalidates their connections with any descendants referring to their timeline in their otherwise happy little subtree bubble. :/

So it's slightly easier to use, but also slightly more likely to run into trouble. :)

<hr>

> A secondary issue: timeline names are `<custom-ident>` right now.

That's definitely a separate issue, and orthogonal to this one. :P

-- 
GitHub Notification of comment by fantasai
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7759#issuecomment-1517338318 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 06:37:23 UTC