The first type of scroll animations are called “scroll-triggered” animations: animations that are triggered when en element enters or leaves the viewport. They don’t change over time based on how far the user has scrolled, but trigger at a certain point.

What they could look like

The four blocks below are set to animate when they enter the viewport. Each item animates in with a small delay after the other (we use staggerChildren for this!). As soon as the elements get out of view again, they animate out.

Scroll down a bit until this element gets out of view, and notice the blocks disappear.