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

// while-in-view gesture: whileInView

// scroll down to trigger the cards

// re-runs on entry I animate every time I enter view

// once: true — latched I animate once, then stay put

// scroll back up — only the first card re-animates

observer: intersection spring: bounce 0.4

category · scroll

sheet · sheet 01 / 01

⟳ to re-run