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

It's not just a matter of ergonomics, we also need to consider the model here.
I also think we can provide some more configuration options here and extend the proposal from specifying a single point to allow specifying 2 points: one for the timeline's start point and another for its end.

On one hand, if this is a property of `view-timeline` it could be reused on every animation that's using it. The question is how will these 2 points interact with the existing ranges, since they're all defined from the start-edge of the subject to it's end-edge (unless the subhect is larger than the scrollport).
I suppose if they're the same point on the subject, `entry` and `exit` shrink the timeline to a single point, while `contain` and `cover` contract it to the progress of that point through the entire scrollport.
Regarding syntax, "inset" is already taken, and "offset" would be to confusing, especially with `ViewTimeline.startOffset`/`endOffset`.
Maybe something like `view-timeline-subject-inset` and `ViewTimeline.subjectInset`? Also, the shorthand is a bit awkward with `-inset`. Perhaps using a `/` may improve it?

OTOH, if we keep `view-timeline` as is and extend the syntax of `animation-range`, we can't share this timeline of a single point on a subject, at least until we have GroupEffects (:
Regarding the syntax, I don't think we need a new range here, but rather allow pairs of `<length-percenrage>` for `animation-range-start` and `animation-range-end`, so that the first value is relative to subject's start-edge, and the second is relative to scrollport's `start-edge.

So to summarize our options:

1. Extending `view-timeline`:
- Can share across different animations
- Can't be used with named ranges, only length-value - like scroll-timeline
- Can work with existing syntax

Example:
```css
.source {
  view-timeline: --source-view y / 50%; /* define the timeline to be the progress of the center of the subject through its nearest scrollport */
}
```

2. Extending `animation-range`:
- Can't be shared across different animations (until we have GroupEffect)
- Avoids issue with named ranges 
- Probably requires a new unique syntax

Example:
```css
.target {
  animation-timeline: view();
  animation-range: 50% 0% 50% 100%; /* starts when subject's center enters viewport and ends when it leaves it */
}
```

Note you have to use 4 values, because using simply `50% 0% 100%` will mean that the `100%` is converted to `cover 100%`.
I suppose we could try considering new keywords for a specific point on the subject that would make it more readable.


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


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

Received on Friday, 21 June 2024 17:54:16 UTC