Re: [csswg-drafts] Interpolate values between breakpoints (#6245)

I meant querying as in “getting the value from the animation” rather than using queries as in media/container-query like. 

Here is a quick demo with scroll-driven animations of what I mean: https://codepen.io/kizu/pen/QWzppBd — implementing the first example from the explainer where we can interpolate any values from 10rem to 40rem of the container.

We can do this by having an element that has a width of 40rem, applying an inline view timeline on it, using the `timeline-scope` to lift this timeline up, and finally using it on our header with the cover range from `10rem` to `40rem`. Voilà.

https://github.com/w3c/csswg-drafts/assets/177485/398e7661-ae80-40c5-a862-ac83c0c0b22a

What I wanted to say: we already can _kinda_ achieve this with the scroll-driven animations, but in a rather cumbersome way, so it would be really nice to have something native, but we can use scroll-driven animations for prototyping things for now.

I don't yet have a preference over which of the proposed solutions could be the best — would need to think about this separately, mostly wanted to express the support for moving in this direction, as well as provide a workaround that currently works in Chrome.

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


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

Received on Saturday, 9 September 2023 15:55:45 UTC