Scroll-Driven, Scroll-Triggered, Scroll States, and View Transitions

I’ve said one and mean 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. Scroll-Driven Animations 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(); } CodePen Embed Fallback Scroll-Triggered Animations A scroll- triggered animation executes on scroll and runs in its entirety. In other words, there’s no direct link with the scroll progress here. When an element crosses some defined threshold — called the trigger activation range — the animation runs, runs, runs. For example, when that element enters and exits the scrollport. CodePen Embed Fallback Container Query Scroll State This one’s in the working draft of CSS Conditional Rules Module Level 5 specification. Here’s how the spec defines it: […] allows querying a container for state that depends on scroll position. This is why my brain hurts so much. It’s sorta like a scroll-driven animation, sorta like a scroll-triggered animation, but updates styles when a container reaches some sort of scroll condition, say: .sticky-nav { container-type: scroll-state; position: sticky; top: 0; @container scroll-state(stuck: top) { background: orangered; border-radius: 0; flex-direction: row; width: 100%; a { text-decoration: none; } } } CodePen Embed Fallback View Transition This has nothing to do with scroll! And it has nothing to do with view() . We’re actually talking about a complete API with interlocking CSS and JavaScript features that can do two things: Same-document transitions An elem