bramus, 11 months ago

Some things still need to be polished, but it’s already in a good enough state to try things out.

To keep track of how the implementation progresses, star https://crbug.com/1023424 to stay up-to-date.

Should you happen to find a bug, please file one at https://crbug.com

kizu, 11 months ago

@bramus Hey hey!

There are two bugs that are very weird in my use-case:

https://bugs.chromium.org/p/chromium/issues/detail?id=1447321
https://bugs.chromium.org/p/chromium/issues/detail?id=1447323

The example for it is a bit convoluted, but when I tried reducing it, the issue became less apparent, so I decided to keep most of the code (and to actually demonstrate the desired use-case).

bramus, 11 months ago

@kizu Thanks for reporting. There’s some known issues with animations that run on the compositor not being timed correctly.

Workaround is to force a main thread animation. Easiest way to achieve that is to add some (non-number) custom prop in the keyframes, like you also found out.

I’ve linked up your bugs to the main tracking one.

kizu, 11 months ago

@bramus Thanks!

kizu, 11 months ago

@bramus Hey hey! After one of the most recent updates (116.0.5793.0) there seemed to be some changes to how scroll-driven animations work with sticky positioning — and it really feels like a regression, at least for my case:

https://codepen.io/kizu/pen/OJBvoRp

I remember it was mentioned somewhere that there are changes to this combination, but in the case like above I would really expect the sticky to work exactly as non-sticky, but maybe I'm missing something? And is there a way to make what I want now?

bramus, 11 months ago

@kizu As per spec, sticky should stretch/pause the range. You can always track a parent wrapper if you want non-sticky behavior.

kizu, 11 months ago

@bramus Can you elaborate on the “parent wrapper”? Sticky element cannot have a wrapper that would have the same height as the sticky element itself, as in this case the sticky element would stop being sticky if I understand correctly what you mean.

johannes, 11 months ago

@kizu @bramus It seems like we keep bumping into sticky situations with sticky positioning, don't we? 😄

The current behavior of 'position: sticky' is just too limiting, and it's particularly frustrating that its position box must be contained inside its containing block. No room for a helpful wrapper there! 🙅‍♂️

If only we could find a more flexible way of defining the "sticky constraint rectangle," it would make our lives a whole lot easier 😄

https://github.com/w3c/csswg-drafts/issues/2496

kizu, 11 months ago

@johannes @bramus I wonder if anchor positioning could be applied to this in some way? As a lot of sticky cases really sound like them being anchored either to the viewport or to the previously stuck elements, which feels like it could be expressed via sticky position maybe?

johannes, 11 months ago

@kizu @bramus Are you proposing to allow for making one sticky element stick to another sticky element using anchor positioning? 🤔

I know this isn't valid, but something like:

h1 {   
 anchor-name: --heading;   
 position: sticky;   
 top: 0;   
}

h2 {  
 postion: sticky;   
 top: anchor(--heading bottom);  
}  

kizu, 11 months ago

@johannes @bramus Yep, something like this! There are many cases like this in the wild (some examples in the issue you linked), where we'd want the sticky element to ”know” about other currently stuck elements.

In this case we would probably want something like a max() to choose between the previously stuck element and the “scrollbox”.

johannes, 11 months ago

@kizu @bramus Nice 😄. Wonder if that could work.

Maybe someone should open an issue on the Anchor Positioning spec, if there isn’t one already? 😇

bramus, 11 months ago

@johannes @kizu This thread: https://github.com/w3c/csswg-drafts/issues/2496#issuecomment-1002312635 ;)

johannes, 11 months ago

@bramus @kizu 😄

bramus, 11 months ago

If you need an intro on Scroll-Driven Animations, go check out my #GoogleIO talk which has a section on this.

https://youtube.com/watch?v=oDcb3fvtETs&t=335s

(Also covered are View Transitions, Individual Transform Properties, and CSS linear())

bramus, 11 months ago

If you’re more into reading, then https://developer.chrome.com/articles/scroll-driven-animations/ will float your boat.

bramus, 11 months ago

Finally, all demos and tools mentioned in both the article and talk can be found on this minisite.

https://scroll-driven-animations.style/

Source available through the ℹ️ box, or by viewing the source (it’s good ‘ole HTML+ CSS(+JS); there is no framework nor build system involved)