Coordinating multiple elements.

A scroll checkpoint is global to the page, not local to an animation. Any number of scroll animations can use it as their start, end, or any intermediate point. They all react to the same scroll position together.

Move the checkpoint by 50 pixels, every animation that references it shifts by 50 pixels. Rename it, every reference updates. Delete it, every animation that depended on it tells you so explicitly.

Most animation tools tie scroll triggers to individual elements. To make a heading and an image react to the same scroll point, you have to set up matching start/end values on each one separately. If the layout changes and you need to nudge the trigger, you nudge it twice (or three times, or ten).

With shared checkpoints, “the heading entrance starts here” and “the image scale starts here” and “the background fade starts here” all reference the same anchor. One source of truth.

To coordinate two animations on the same checkpoint:

• Create the first scroll animation. It auto-creates its start and end checkpoints.
• Open the checkpoint settings and rename them to something descriptive (“Hero start”, “Hero end”).
• Create the second scroll animation. In its checkpoint dropdown, instead of accepting the new auto-generated checkpoints, pick the existing “Hero start” and “Hero end”.
• Both animations now share the same scroll range. Scroll past Hero start: both begin advancing. Reach Hero end: both complete.

The second animation can have completely different properties (different opacity targets, different transforms, different easing). It just shares the start and end positions.

• The synchronized reveal. Heading fades up, image scales in, background fades from white to dark. Three scroll animations on the same two checkpoints. The whole hero arrives as one choreographed beat.
• The progressive transformation. Same anchor, but each animation completes at a different intermediate checkpoint. Heading is done by 30% of the scroll range, image done by 70%, background done at 100%. Layered, not synchronous.
• The cross-section bridge. A checkpoint anchored to the bottom of section A, used as the start of a scroll animation that lives in section B. A title in section B begins moving the moment the visitor finishes section A. Sections feel connected.

The maintenance side of shared checkpoints is where they really pay off. Six months later, when you redesign the hero and need to shift the entire choreography 100 pixels down, you don’t edit six animations. You drag one checkpoint. Every animation that references it follows.

The mental cost of complex scroll choreographies drops from O(N) to O(1). Whether you have three coordinated animations or thirty, maintenance is the same handful of clicks.

• Creating and moving checkpoints covers the marker mechanics.
• Anchored vs absolute markers picks the right anchor mode for shared checkpoints.
• Scroll-based animations covers the host animation type.