Scroll-Driven Animations in Stable Chrome
- Published on:
- Categories:
- CSS 40
- Current music:
- Mammal Hands — Floating World
- Current drink:
- White tea with litchi, pineapple, mango, and papaya
Before my first experiments with anchor positioning, I had not previously written about non-production experimental things. I’m usually very practice-oriented and like to play with things that I can just go and put into production. However, a lot of new CSS developments sounded too tasty to leave aside, and when playing with things, I found out that I have a lot to say and contribute.
While there is a long road ahead for anchor positioning itself, I did end up writing three articles about scroll-driven animations while they were being developed in Chrome Canary, describing a number of practical techniques:
- “Future CSS: Wishes Granted by Scroll-driven Animations”
- “Fit-to-Width Text”
- “Position-Driven Styles”
I did start playing with them when they were under an experimental flag and continued when they were moved outside of it and planned for an eventual release. There were a lot of things I had to adapt to and change in my experiments through the implementation and specs changes — one of the aspects when you touch experimental stuff.
But I’m very happy with what I managed to achieve in my experiments.
Now, starting from Chrome 115, almost all of these experiments actually work in stable Chrome (outside one experiment using timeline-scope)!
That is a bit of a weird feeling. I did come up with a number of experimental techniques that have now become real:
:stuckimplementation, which, I’d argue, is even more powerful than the proposed state query version.- Proper scrolling shadows
- Fit-to-width text
- Distributing values across a list of items
- Staggered animations
- Reverse layer ordering
- Edge detection for elements on the edges of their flex or grid containers.
- Flex-wrap detection.
- …and I have a number of experiments and techniques I have not yet published— stay tuned!
How cool is it not only to get the new CSS spec’s implementation into a stable browser, but to already have a bunch of techniques to apply?
Of course, there is still a need to wait until other browsers pick up scroll-driven animations, but things seem to be positive: WebKit seems to be in support of it, and it sounds like Mozilla has already started working on the implementation. That means that, unless done with extreme care, we shouldn’t use these techniques in production.
But there is one place where we could already start playing with the scroll-driven animations: CSS overrides for sites that you look at in Chrome. That sounds like a good place where the low browser support won’t matter much, so keep that in mind: we can now tweak styles with scroll-driven animations!