Re: [csswg-drafts] [scroll-animations-1] View progress contain of a sticky positioned elements on the edges (#8298)

I did try using the named view timeline on the sticky element's parent, but this doesn't work for my case, as we cannot have a wrapper element for the sticky element without breaking its sticky behavior. So, from what I can gather, it makes it impossible to somehow use the view timeline for the sticky element as if it was not sticky (as in — use it only for the sticky element's original principal box, as if it was not affected by stickiness.

Why I want to have this behavior: it unlocks _a lot_ of different use-cases, like having animated sticky headers, scroll shadows, and so on. Here are some videos of my experiments that did work before `116.0.5793.0` and which seemingly cannot be re-created with the new version of the sticky behavior.

Sticky headers (won't be satisfied by the potential stuck state query or something, as this is not a binary state, but a _scroll-driven animation_):  


https://github.com/w3c/csswg-drafts/assets/177485/a012f2ab-ae1e-4507-9244-febdf1b02d06

Scroll shadow (the exact case I have the video of shows a binary state, but I just didn't get to implementing the case where the shadows appear gradually; though unlike sticky shadows there is a chance it could be possible to implement this one with a different method, would need to experiment on it):

https://github.com/w3c/csswg-drafts/assets/177485/2bf82e39-3818-4366-b04c-9318344211e9

I had experiments that did work in one of the earlier versions of Chrome Canary, and was very happy it would've been possible to achieve these cases with scroll-driven animations, so I would really want us to see if we could somehow make this possible?

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


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

Received on Friday, 26 May 2023 23:18:32 UTC