While In View | Svelte Motion

FIG-001/ SCROLL

animate in view.

whileInView is a viewport-driven gesture state. Motion mounts an IntersectionObserver and runs the animation whenever the element enters the viewport. Two cards: one re-runs every entry, the other latches once.

whileInView is one of motion's gesture states — like whileHover but triggered by the viewport. The animation runs on entry and reverses to animate (or initial here) on exit.
viewport={ once: true } latches the entrance — once the card has animated in, it stays put even when it scrolls out. amount tunes how much of the element must be visible; margin adjusts the trigger threshold.
Each card carries its own transition inside the whileInView target. Different from transition as a separate prop — defining it inline binds the timing to the gesture so it doesn't double-up with default transitions.

↩ all examples

pattern · whileInView gesture mode · live running source

Scroll down to see the animations

I animate every time I enter view

I animate once — viewport={ once: true, amount: 0.5, margin: '-50px' }

Scroll back up — only the first card re-animates

category · scroll

sheet · sheet 01 / 01

⟳ to re-run