# While In View
> Animate elements when they enter or leave the viewport using Svelte Motion whileInView. Create scroll-triggered reveal and exit animations.
**Source:** [https://motion.svelte.page/examples/while-in-view](https://motion.svelte.page/examples/while-in-view)
**Markdown mirror:** [https://motion.svelte.page/examples/while-in-view.md](https://motion.svelte.page/examples/while-in-view.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: 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.
**Metadata:** tag: `SCROLL` | pattern: `whileInView gesture`
### Notes
- `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.
### Source
#### Default.svelte
Source file: [src/lib/examples/while-in-view/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/while-in-view/demos/Default.svelte)
```svelte
// while-in-viewgesture: whileInView
// scroll down to trigger the cards
// re-runs on entryI animate every time I enter view// once: true — latchedI animate once, then stay put
// scroll back up — only the first card re-animates