[csswg-drafts] [scroll-animations-1] Add a new named timeline range that is independent of subject dimensions. (#9617)

johannesodland has just created a new issue for https://github.com/w3c/csswg-drafts:

== [scroll-animations-1] Add a new named timeline range that is independent of subject dimensions. ==
The current [named timeline ranges](https://drafts.csswg.org/scroll-animations-1/#view-timelines-ranges) all depend on the subject dimensions. If the subject changes dimensions, or the same range is used on another subject, the timing will be different. 

Can we define another named timeline range `size-independent-to-be-bikeshed`, where:
-  0% progress represents the latest position where the **center of the element's principal box** coincides with the end edge of its view progress visibility range. 
- 100% progress represents the latest position where the **center of the element's principal box** coincides with the start edge of its view progress visibility range.

This will let authors set a view-timeline where the timing will not depend on the size of the subject, only its position. A percentage will represent the subjects center being at a percentage of the view progress visibility range.

```css
.subject {
  animation: linear anim both
  animation-timeline: view();
  animation-range: size-independent 25% 75%;
}
```
![ranges](https://github.com/w3c/csswg-drafts/assets/175195/4c93d863-abe3-41ad-9956-0b5361cd9e8e)

### Background
ViewTimeline timing can be hard to reason about as the timing depend on both the subject and source dimensions. The timing of the 'cover' range will become increasingly slow as the subject size increases, while the 'contain' range will become increasingly fast as the subject size gets closer to the view progress visibility range. A timing that seems reasonable on a desktop screen, might be lighting fast on a small mobile screen. 

Creatives coming from other fields such as animation have found this hard to grasp. A range that worked fine on one element, might not work at all on another. I think a named timeline range that depends solely on the subjects position and the view progress visibility range could be useful.

One particular use case is to animate an element across the center of the scrollport, from the center of the element is at 25% of the scrollport until the center of the element is at 75% of the scrollport, independent of the dimensions of the element. 

### Current workarounds
It is possible to work around the problem using the current spec, but they all have drawbacks: 

**Use insets**
It is possible to use inset percentages in stead of a named timeline range to achieve the desired effect. 
```css
.subject {
  animation: linear anim both
  animation-timeline: view();
  animation-range: entry-crossing 50% exit-crossing 50%;
  view-timeline-inset: 25% 75%;
}
```
The animation timing is not dependent on the subject dimensions. A small subject will animate over the same scroll distance as a large subject. 

However, this is hard to comprehend and does not convey the authors intent in a good way. It will also require additional calculations if you need to set the `view-timeline-inset` to account for actual insets due to headers or other elements that cover parts of the view.

**Use keyframe selectors**
It is also possible to use keyframe selectors to achieve the same result. 

```css
@keyframes anim {
  25% {
    ...
  }

  75% {
    ...
  }
}

.subject {
  animation: linear anim both
  animation-timeline: view();
  animation-range: entry-crossing 50% exit-crossing 50%;
}
```
Using keyframe selectors will also work, but it has the drawback that it will prevent authors from reusing existing keyframe effects.

### Proposal
Add a new named timeline range as described above.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9617 using your GitHub account


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

Received on Monday, 20 November 2023 16:52:07 UTC