I’ve said one and meant another, and I’ve used one when I needed another. Please bear with me as I note the high-level similarities and differences between scroll-driven animations, scroll-triggered animations, container query scroll states, and view transitions for my future self.
A scroll-driven animation is an animation that responds to, yeah, scrolling. Specifically, there’s a direct link between scrolling progress and the animation’s progress. Scroll forwards, the animation moves forward. Scroll backwards, the animation runs backwards. Stop scrolling, the animations stops.
.element {
animation: grow-progress linear forwards;
animation-timeline: scroll();
