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

Sorry, I've been discussing this issue in private channels and haven't taken the time to raise my concerns publicly. Let's get that fixed. ^_^

I find the current proposed API shapes (-name, -axis, and -attachment) to be *intensely confusing*. The -attachment values are not modifying some properties of the "animation", but rather setting a mode on the element that changes how they use the -name and -axis properties. I believe this is caused by an accumulative design; we'd already designed a "create animation, attach scroller to it" on a single element, and tried to do a minimum delta into the new model of those two things being separate.

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.

There are two separate things we want to do:

1. Define a (timeline name, element scope) tuple, to establish what elements can use a given timeline.
2. Attach a particular scroller's axis to a particular timeline name.

My syntax proposal borrows from [Bramus's](https://github.com/w3c/csswg-drafts/issues/7759#issuecomment-1477443523):

* `scroll-timeline-root: [ <timeline-name> && ancestor? ]#`
* `scroll-timeline-axis: [ none | <axis-keywords> ]#`

Each property has two possibilities: `scroll-timeline-root` can either create a new timeline name, or refer to an ancestor's timeline name; `scroll-timeline-axis` can either attach an axis to the timeline specified by `-root`, or not.

The shorthand possibilities, then, are:
* `scroll-timeline: foo;` creates a `foo` timeline, but doesn't attach a scroll axis to it; it's assumed a descendant will do so.
* `scroll-timeline: foo block`; creates a `foo` timeline and attaches the element's scrolling block axis to it
* `scroll-timeline: foo ancestor block;` attaches the element's scrolling block axis to a `foo` timeline established by an ancestor
* `scroll-timeline: foo ancestor none;` does nothing. We might want to write out the shorthand grammar explicitly to disallow this (rather than just using `<'scroll-timeline-root'> || <'scroll-timeline-axis'>`

--------

We *could* eliminate the dead possibility by instead specifying `ancestor` in `scroll-timeline-axis` instead. That is:

* `scroll-timeline-name: <timeline-name>#`
* `scroll-timeline-axis: [ <axis-keywords> && ancestor? ]#`

But this means the `-axis` value is changing the interpretation of the `-name` value (determining whether it *creates* a timeline of that name, or just seeks an ancestor timeline of that name). That feels less great.

------

A third possibility (sorry for the options) - do we actually need longhands here? This implies that we find it important to control the timeline name independently from the timeline axis. Is this indeed important? If not, we can simplify this significantly by just using a single property with a slightly larger grammar:

* `scroll-timeline: [ <timeline-name> && ancestor? && <axis-keywords>? ]#`

------

A secondary issue: timeline names are `<custom-ident>` right now. Is that a necessity? Making it `<dashed-ident>` would be nice since it would avoid the grammar ever clashing in the future with new keywords.

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


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

Received on Wednesday, 19 April 2023 18:15:19 UTC