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
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
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
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.
Basically, the state changes on the same page it started. Bramus is king of all-thing view transitions with oodles of beautiful examples in this collection from the Chrome team.
Cross-document transitions
Animating from one page to the next. The default usage is a crossfade from Page A to Page B (and back again) and is really easy to implement. It can get much more complex from there, of course. Sunkanmi recently shared several recipes, like this neat one that wipes out the first page with a circular clip-path revealing the second page.
That’s all!
It helps me to spell things out like this.
| Type | What it does |
|---|---|
| Scroll-Driven Animations | Scroll forwards, the animation moves forward. Scroll backwards, the animation runs backwards. Stop scrolling, the animations stops. |
| Scroll-Triggered Animations | When an element crosses some defined threshold — called the trigger activation range — the animation runs, runs, runs. |
| Container Query Scroll State | Updates styles when a container reaches some sort of scroll condition. |
| View Transition | API for same-document transitions (element changes from one state to another on the page) and cross-document transitions (transitioning from one page to the next, and back). |
Scroll-Driven, Scroll-Triggered, Scroll States, and View Transitions originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.