Re: [csswg-drafts] [scroll-animations-1] Bring back Scroll Offsets (#7575)

Thanks @ydaniv.

> > i.e. the effect was supposed to be a "dumb", static, stateless thing agnostic of how it is used
>
> I strongly agree with this, but, I suppose, since we've already agreed we'll allow keyframe's offsets to be ranges etc. So this is no longer the case.

Good point. I guess that ship has sailed.

It would be nice to do some wholistic thinking about how all these units could combine harmoniously in the context of group effects where we may wish to use percentage values / ranges even when using a regular timeline.

I've outlined the situation a little bit [here](https://github.com/w3c/csswg-drafts/issues/7102#issuecomment-1074835685) and [here](https://github.com/w3c/csswg-drafts/issues/4862#issuecomment-625067968)  but unfortunately no-one, myself included, has ever had time to look into it properly.

I think it would be really fun to analyze these pieces in terms of layout terms. If you can picture the different intervals being laid out horizontally as boxes:

- An effect's delay and end delay, behave like padding.
- Its keyframes are (possibly repeated) child box(es)--iteration boxes--whose intrinsic width is determined by the iteration duration.
- Iteration boxes behave like `position: relative`, hence why percentage keyframe offsets resolve against the effect's iteration duration.
- The combination of iteration boxes makes up the effect's content box size (active duration).
- Fill modes behave like the `overflow` property somewhat.
- An animation is like an abspos container with the playback rate behaving like a `scaleX()` transform.
- A sequence effect is a flex container while a group effect is a flex container with `flex-direction: column`.

I think once you look at it in those terms, we can think of natural ways to have percentages resolve (e.g. if a group effect specifies a duration, it behaves like `position: relative` and percentages delays on children resolve against its iteration duration, otherwise they resolve against the next ancestor all the way up to the abspos animation and its iteration duration, if any).

I'm not really sure what the equivalent for a timeline would be though?

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


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

Received on Monday, 21 November 2022 01:11:00 UTC