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

I’ve mentioned one and meant one other, and I’ve used one once I wanted one other. Please bear with me as I be aware the high-level similarities and variations between scroll-driven animations, scroll-triggered animations, container question scroll states, and view transitions for my future self.

A scroll-pushed animation is an animation that responds to, yeah, scrolling. Particularly, there’s a direct hyperlink between scrolling progress and the animation’s progress. Scroll forwards, the animation strikes ahead. Scroll backwards, the animation runs backwards. Cease scrolling, the animations stops.

.ingredient {
  animation: grow-progress linear forwards;
  animation-timeline: scroll();
}

A scroll-triggered animation executes on scroll and runs in its entirety. In different phrases, there’s no direct hyperlink with the scroll progress right here. When a component crosses some outlined threshold — referred to as the set off activation vary — the animation runs, runs, runs. For instance, when that ingredient enters and exits the scrollport.

This one’s within the working draft of CSS Conditional Guidelines Module Stage 5 specification. Right here’s how the spec defines it:

[…] permits querying a container for state that is determined by scroll place. 

That is why my mind hurts a lot. It’s sorta like a scroll-driven animation, sorta like a scroll-triggered animation, however updates kinds when a container reaches some type of scroll situation, say:

.sticky-nav {
  container-type: scroll-state;
  place: sticky;
  high: 0;

  @container scroll-state(caught: high) {
    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 really speaking a few full API with interlocking CSS and JavaScript options that may do two issues:

Identical-document transitions

A component adjustments from one state to a different in response to a person interplay. I used to be actually tickled by this one from Trendy Net Weekly animating radio button test states the place the state strikes from one enter to the opposite.

Mainly, the state adjustments on the identical web page it began. Bramus is king of all-thing view transitions with oodles of lovely examples in this assortment from the Chrome staff.

Cross-document transitions

Animating from one web page to the subsequent. The default utilization is a crossfade from Web page A to Web page B (and again once more) and is very easy to implement. It may possibly get far more advanced from there, in fact. Sunkanmi just lately shared a number of recipes, like this neat one which wipes out the primary web page with a round clip-path revealing the second web page.

That’s all!

It helps me to spell issues out like this.