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

I’ve stated one and meant one other, and I’ve used one after 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.

.component {
  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 — known as the set off activation vary — the animation runs, runs, runs. For instance, when that component enters and exits the scrollport.

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

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

This is the reason 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:

Similar-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 Internet Weekly animating radio button test states the place the state strikes from one enter to the opposite.

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

Cross-document transitions

Animating from one web page to the following. 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 get rather more complicated from there, after all. Sunkanmi not too long ago 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.