What if I will tell you how we could solve fit-to-width text with pure #CSS without any hardcoded parameters? Curiously, scroll-driven animations will allow us to do just that!
Welcome my new article — “Fit-to-Width Text” — where I continue exploring the experimental implementations of the latest specs.
@kizu Brilliant! So, scroll-driven animations not only gift us with, well, scroll-driven animations, but also serve as a “solution” for Scroll-triggered animation and scale-to-fit. Then in a hacky, limited fashion, they can also tackle :snapped and css toggles.
Anything else?
@johannes Well, the things from https://kizu.dev/scroll-driven-animations/#table-ofcontents-with-highlighted-current-sections — :stuck for the sticky headers, scroll shadows — basically a lot of “state queries” like checking if there is a scroll on en element at all, if it is at the start or end of it etc.
Then, I have another article that I was writing when I stumbled over the fit-to-width which have one other interesting use cases.
And some other random ideas I'll need to try from my notes :)
Stuck state for sticky headers? “Proper” solution for scrolling shadows? Highlighting the currently shown sections in a Table of Contents? All these things could become possible with the new scroll-driven animations spec. Today, I gather and explain some of my experiments with this new CSS feature.
Roma Komarov
Johannes Odland