Elements that arrive with the scroll.

Reveal any element on scroll, with a slide that knows which way you scrolled. No dependencies.

Direction-aware slide

The default. Cards rise into place as you scroll down, and settle from above when you scroll back up to them. The IntersectionObserver entry says which edge was crossed, so there is no scroll listener.

Watch me twice

Pass me going down, then come back up. I arrive from whichever side you approached.

Same batch

Everything in a section follows the same scroll direction.

Pinned directions

Set direction and the slide ignores which way you scrolled.

up

Rises from below.

down

Drops from above.

left

Slides in from the right.

right

Slides in from the left.

Fade

animation: 'fade'. No movement, only opacity. The v1 spelling, slide: false, still works.

Fade

The quiet option.

Zoom

animation: 'zoom' with scale: 0.9. Grows to full size while fading in.

Zoom

Starts at 90% scale.

Blur

animation: 'blur'. Sharpens into focus while fading in.

Blur

From soft focus to sharp.

Stagger

stagger: 90. Elements arriving together each wait 90ms longer than the one before, so a grid cascades instead of popping in at once. The wave is measured in time rather than in observer batches, so the cascade looks the same however fast you scrolled into it.

01
02
03
04
05
06
07
08
09

Replay, or once

Elements hide again when they leave the viewport and replay on the way back. With once: true the first appearance sticks.

once: false

Scroll away and back. I replay every time.

once: true

I appear once and never hide again.