[scroll-animations-1] Allow Anonymous Scroll Progress Timelines to target self

[bramus]

When creating an Anonymous Scroll Progress Timelines usning scroll() you can target either the root or the nearest scroller.

Currently nearest is defined as:

Specifies to use the nearest ancestor scroll container. (Default.)

This does not allow authors to create an Anonymous Scroll Progress Timeline that uses the element itself, as nearest only looks to ancestors. E.g. the code below does not work when .container is the scroller

.container {
  animation: 1s bg-scale both linear;
  animation-timeline: scroll(nearest inline);
}

As a result, authors must use a named Scroll Progress Timeline instead:

.container {
  animation: 1s bg-scale both linear;
  scroll-timeline: --self inline;
  animation-timeline: --self;
}

This seems like a bit a hassle. Can we adjust nearest so that it starts looking from the targeted element itself first, and only then to ancestors? Or maybe introduce a new keyword self should altering nearest introduce some nasty side-effects?

[fantasai]

@bramus Do you have any ideas about which of re-using nearest or having a separate self keyword would be more helpful / less confusing / more ergonomic for authors?

[flackr]

I'd prefer adding self. This leaves which scroller is observed by nearest consistent with view-timeline, sticky position, etc.

[bramus]

Thinking things a bit through, I’m also in favor of adding self instead of altering how nearest works. That way authors can have an element both respond to its parent and its own scroll-position. Depending on the use-case, an author might prefer one or the other, so giving them control over it seems reasonable.

Linked to that, I would propose that the default value to remains nearest, for reasons flackr@ listed just above.

Proposed resolution: Add self as a value for <scroller>. Keep nearest as the default value.

[css-meeting-bot]

The CSS Working Group just discussed [scroll-animations-1] Allow Anonymous Scroll Progress Timelines to target self, and agreed to the following:

• RESOLVED: add a `self` keyword

The full IRC log of that discussion

<argyle> astearns: alright, let me… get the next issue in
<argyle> astearns: anonymous scroll progress
<argyle> bramus: when you create an anonymous scroll tiemline, you can use a function for that, targets nearest or root. nearest is the nearest ancentor scroll container
<argyle> bramus: this is limiting in a way, you cant target the scroller itself
<bradk> present +
<smfr> q+
<argyle> bramus: you can bypass this by creating a named scroll timeline and then using it as an animation timeline, but not very dev friendly
<argyle> https://www.irccloud.com/pastebin/yXONpCDN/bram
<argyle> bramus: looking at the comments, folks like `self`
<argyle> bramus: that's my recommendation
<astearns> ack smfr
<fantasai> smfr: Is it using the containing block ancestor chain, or the parent chain?
<argyle> smfr: what algo is used to detemrine the nearest container scroller?
<argyle> smfr: answer, containing block. which is appropriate.
<argyle> astearns: any other comments?
<argyle> astearns: current workaround is a haslte, but is it enough tomerit another keyword
<argyle> fantasai: i think it does, people create custom names is not great. makes it hard to reuse the thing you're doing
<argyle> fantasai: better to have this tool. what happens whent he element in question is not in fact a scroll container.
<argyle> fantasai: better to have this tool. what happens whent he element in question is not in fact a scroll container?
<argyle> flackr: we have to answer that question for named scroll timelines right? my [proposal would be that you get a scoll timeline but it has time undefined because the thing being observed is not a scroller. animatoin has no effect.
<argyle> proposed resolution is to add a `self` keyword, which will used what the scroller is and will be well defined
<argyle> astearns: proposed resolution is to add a `self` keyword, which will used what the scroller is and will be well defined
<argyle> astearns: any comments or obejections? we are resolved to add a self keyword.
<argyle> RESOLVED: add a `self` keyword