- From: Yehonatan Daniv via GitHub <sysbot+gh@w3.org>
- Date: Fri, 24 Nov 2023 17:38:58 +0000
- To: public-css-archive@w3.org
> This is fine. Sometimes that is what you need. I'm arguing that it's useful to have an attachment range where the animation progresses equally for these two elements. If you want to sync the animation of multiple elements in different sizes (and/or position) it's as easy as using a single named timeline, and then referencing that timeline in all of these animations. Alternatively, you could use a duration with a fixed length like: ```css animation-range: contain 0% contain 500px; ``` > This is fine. Sometimes that is what you need. I'm arguing that it's useful to have an attachment range where the animation progresses equally for these two elements. You already have the tools to create synchronized animations for the case above. And IMHO they're already quite simple to use as is. > As I stated in the issue text, there are better workarounds that work with the current spec. We've been using versions of them for years. I do think we can improve the notation for authors. I would really love to see examples of these. > If you set an animation range of entry-crossing 50% exit-crossing 50% the animation attachment range will start when the elements center is at the end edge of the scrollport, and stop when the elements center is at the start edge of the scrollport. These are the endpoints of the size-independent animation range I suggested. That's a very specific case that can easily be done by using a single named timeline. In order for different timelines to be "size independent" you simply need to make sure their durations are equal. If you want a single timeline to be "size independent" you can simply set both start and end ranges to reference same point like: ```css animation-range: contain 0% contain 100vh; ``` And you can also play with the `view-timeline-inset` on top of that. Because I've had the same issues with explaining this model to PMs and designers, I'm really trying to get to the bottom of your issue. -- GitHub Notification of comment by ydaniv Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9617#issuecomment-1825951467 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 24 November 2023 17:39:00 UTC