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

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.

Scroll-Driven Animations

Scroll-driven animations

Limited availability

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();
}

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.

Container Query Scroll State

Container scroll-state queries

Limited availability

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;
 }
 }
}

View Transition

View transitions

Baseline2025newly available

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 element changes from one state to another in response to a user interaction. I was really tickled by this one from Modern Web Weekly animating radio button check states where the state moves from one input to the other.