Open flackr opened 12 months ago
Big +1 in general.
Regarding:
My preference would be to have animation-range without a range name use this range, e.g. just animation-range: entry 0% 1000px or animation-range: 200px 1000px but I think @fantasai had concerns with having the default animation range be cover except if you specify an animation-range without a named range.
I'm not sure I'm following.
For now we have no range defaults to the timeline's full range, which is cover
for View, and scroll
for Scroll.
IIRC animation-range: entry 0% 1000px
should expand to animation-range: entry 0% cover calc(0% + 1000px)
. So if you specify a range without a name it uses default range, right?
@flackr ok I think I understand your point.
I guess for ViewTimeline having the default be cover
is more sensible than scroll
, then 0% 90%
for view would default to an actual view timeline. Otherwise it would default to yet another ScrollTimeline.
So cover
seems like a good default, and having scroll
as an opt-in for breaking out of that range is also very useful.
I think this issue is ready for agenda+, WDYT?
Two thoughts:
scroll
why not name it full
? As that’s what it targets, right?normal
.
cover
full
Some examples:
animation-range: 10% 90%
= animation-range: cover 10% cover 90%
;animation-range: entry 10% 90%
= animation-range: entry 10% cover 90%
;animation-range: 10% 90%
= animation-range: full 10% full 90%
;The CSS Working Group just discussed [scroll-animations-1] Range for entire scroll range
, and agreed to the following:
RESOLVED: add 'scroll' named range to view timelines, represents entire scroll range, bikeshed keyword in issue
I think I get why scroll makes sense as a name: You are using the range of a scroll timeline for a view timeline. In which case I am fine with scroll.
bikeshed keyword in issue
To carry out this bikeshedding, the proposals are:
scroll
as in the scrollable range of the associated scrolling container and the range you would get from a scroll timeline.full
as in the full scrollable range of the associated scrolling container. Confusingly, this can be smaller than the cover range when the scrollable range cannot scroll the subject out of view.content
as in the range of the scrollable content in the associated scrolling container, minus the size of the scrollport.I think we're pretty well aligned on #1, but happy to have emoji votes / comments or rationales for the others, or suggestions for alternatives.
If we do name it scroll
, then that should also be a valid range name for ScrollTimeline
, right?
That way, using scroll 0% scroll 100%
as the range on both a ScrollTimeline
and ViewTimeline
(that track the same scroller) is the same.
Additionally, for ScrollTimeline
specifically, all these range values would mean the same:scroll 0% scroll 100%
= 0% 100%
= normal normal
.
If we do name it
scroll
, then that should also be a valid range name forScrollTimeline
, right?
That would also allow fixing that non spec-compliant situation in Chrome where you have to pass in "none"
as the name when trying to set a range using an object in JavaScript. If this were "scroll"
then it’d make sense.
anim.rangeStart: {
offset: CSS.px(100),
rangeName: 'none', // This needs to be `"none"`, but `none` is not defined in the spec as a valid `rangeName`.
},
If we do name it scroll, then that should also be a valid range name for ScrollTimeline, right?
According to spec range names are only defined for ViewTimeline, so why should this be any different?
That would also allow fixing that non spec-compliant situation in Chrome where you have to pass in "none" as the name when trying to set a range using an object in JavaScript.
That sounds unfortunate. But in CSS the name is optional. Can't it be the same in JS?
It has come up a few times (https://github.com/w3c/csswg-drafts/issues/8942#issuecomment-1722261722, https://github.com/w3c/csswg-drafts/issues/8672#issuecomment-1545980510, https://github.com/w3c/csswg-drafts/issues/8578#issuecomment-1540705525) that we don't have any way to specify the entire scroll range for view timelines.
We decided in other issues that because we want the default range for a view timeline to be the cover range we should have cover by the normal range. If we want to preserve this but still support the use cases for the entire scroll range we should add a new range name for view timelines to cover this. E.g. the
scroll
range could represent the full range. Then authors could do something likeanimation-range: entry 0% scroll 1000px
to make an animation from when an element enters to when you're scrolled 1000px down.My preference would be to have
animation-range
without a range name use this range, e.g. justanimation-range: entry 0% 1000px
oranimation-range: 200px 1000px
but I think @fantasai had concerns with having the default animation range be cover except if you specify an animation-range without a named range.