Scroll animation for developers

A scroll trigger is two positions: a point on the element and a point in the viewport. When they meet, something happens. Most late, missing or “broken” scroll animations are a start position that the reader passes before the element is visible.

A reader crosses a trigger four ways: entering going down, leaving going down, entering coming back, leaving coming back. toggleActions is one decision for each. Copying “play none none none” gives you one of sixteen thousand combinations without choosing it.

Some animation should not have a duration at all. A diagram that draws as you scroll, a bar that fills, a shape that turns: their progress is the reader’s scroll progress, so scrolling back undoes them. That is scrub.

Pinning holds a section still while the reader keeps scrolling, which turns scroll distance into time. It is the mechanism behind most scrollytelling. It is also the fastest way to hide the next section or trap the reader for three screens.

Parallax is a speed difference. Things far away move less as you pass them. Applied to a page it is a scrubbed tween on each layer, and it goes wrong in two ways: text that drifts against the page, and shapes that slide so far they leave their section.

Transfer the five decisions to one page with new content and tighter budgets. The scroller is longer, the sections meet each other, and every trigger shares the same reader.