Scroll-based animations.

A scroll-based animation has no clock. Instead, it has two scroll checkpoints: a start and an end. Glopzi maps the scroll position between them to the animation’s progress, 0 to 100%.

Scroll past the start: nothing happens yet. Cross the start: the animation begins to advance. Reach the end: the animation is complete. Scroll back: it reverses.

Reach for a Scroll animation when:

• The motion should depend on where the visitor is on the page, not on time. Parallax, scroll-driven reveals, sticky-element transformations.
• You want it to reverse if the visitor scrolls up.Time animations don’t reverse; scroll animations do, naturally.
• You’re coordinating multiple elements at the same scroll point. Several scroll animations can share the same start checkpoint and move together. See Coordinating multiple elements.
• You want the motion tied to a specific element on the page. Anchored checkpoints follow their target element if the layout reflows.

For motion that fires once on a precise event (load, click, hover, in-view entrance), use time-based animations instead.

A scroll animation has at minimum two scroll checkpoints (start and end). It can have more in between for staged motion: opacity hits 1 by the second checkpoint, scale continues to grow until the third, the rotation completes at the fourth.

Scroll checkpoints live globally on the page. Any number of scroll animations can reference the same checkpoints, which is how you choreograph elements together. Move a checkpoint and every animation referencing it updates at once.

Scrub controls how tightly the animation tracks scroll. Higher scrub values introduce a small lag for a smoother, weightier feel; lower values (or zero) make the animation react instantly to every scroll pixel.

• 0: instant. Every scroll pixel maps directly to animation progress. Snappy, can feel twitchy on touchpads.
• 0.5 to 1: typical. Smooth follow, still tightly coupled to scroll.
• 1 to 3: weighty. Animation visibly lags scroll, settles a moment after you stop. Good for heavy elements and parallax.

Combine with smooth scroll for a particularly fluid feel; the two work together well.

The right panel for a Scroll animation has:

• Targets: element(s) to animate.
• Start checkpoint: the scroll position where the motion begins. Pick from existing checkpoints or create one inline.
• End checkpoint: where the motion completes.
• Scrub: lag value, see above.
• Easing: shape of the curve between checkpoints. See Easing.
• Properties: opacity, transforms, color, blur, etc. See Properties reference.
• Per-checkpoint values: a column for each checkpoint between start and end. Each declares the absolute state at that moment, per the declarative model.

No trigger, no duration, no loop, no yoyo. Scroll animations don’t need them; the scroll itself is the trigger and the clock.

• Scroll checkpoints: the marker system that drives scroll animations.
• Coordinating multiple elements: the killer use case for shared checkpoints.
• Time-based animations: the other half of the type system.