--- title: "In View" description: "Animates its content when it scrolls into the viewport, and optionally replays on every entry." canonical_url: "https://nuxt-motion-block.pages.dev/components/scroll/in-view" --- # In View > Animates its content when it scrolls into the viewport, and optionally replays on every entry. The InView component animates its content when it scrolls into the viewport. It watches the element with VueUse's `useElementVisibility` (backed by the IntersectionObserver API) and swaps between your `hidden` and `visible` variants, so you can drive any entrance animation — fade, slide, scale — from scroll position. ## Usage Wrap the content you want to animate and let the defaults do the rest: it fades from `opacity: 0` to `opacity: 1` over `0.6s` the first time it enters the viewport.
## Examples ### Custom variants and transition Supply your own `variants` and `transition` to change what the entrance looks like. When `threshold` is not `0.3` you control the trigger point, and the element animates the first time it is `30%` visible.
### Render as a different element The `as` prop swaps the root element while keeping the in-view animation, so you can hand the component a `section`, a `blockquote` or any other HTML tag without wrapping it in an extra container.
### Replay on every entry With `once` disabled the component follows visibility directly: it animates in when it enters the viewport and returns to the hidden state when it leaves, so scrolling away and back replays the animation.
### React to animation events Use the `animation-start` and `animation-complete` events to run your own logic when the entrance begins and when it settles. Combine them with `viewOptions` to fine-tune exactly where the trigger fires.
## Customize Tune `as`, `once`, the variants, the transition and the observer options live in the playground below.
## Props The two motion states the component animates between. Either key is merged over the default, so you only supply the properties you want to change. Motion transition forwarded to the root element, controlling duration and easing. Options for the `useElementVisibility` observer. `margin` is the root margin and `threshold` the visibility ratio (or ratios) that triggers the animation. The HTML tag rendered for the root element. Constrained to real tags so motion-v can infer the element type correctly. When `true` the element animates a single time and then stays visible. When `false` it follows visibility, re-animating each time it re-enters the viewport. Merged onto the root element after the theme's classes. ## Events Emitted when the entrance animation starts. The `onAnimationStart` prop is called alongside it as an alternative to the listener. Emitted when the entrance animation settles. The `onAnimationComplete` prop is called alongside it as an alternative to the listener. ## Slots The content to animate. Rendered inside the motion root element. ## UI This component's theme exposes the slots below. Override any of them per instance with the [`ui` prop](https://nuxt-motion-block.pages.dev/getting-started/theming), or app-wide under `ui.inView` in `app.config.ts`. Per-slot classes merged over the theme defaults. ## Accessibility The component renders whatever element `as` resolves to and animates only opacity or transform, so it adds nothing to the accessibility tree beyond your content. There are no ARIA attributes, roles or live regions, and the hidden state is a motion style rather than `display: none` — assistive technology can still read the content before it has animated in. Because the entrance is purely decorative, the events are a convenience hook for your own code, not an accessibility feature. If an animation conveys meaning, expose that meaning in text. This component does not read `prefers-reduced-motion`. Motion honours the user's preference for the transition itself, but if you want to skip the entrance entirely you should branch on `useReducedMotion` in your own content. ## Performance - Visibility is tracked by a single `useElementVisibility` observer on the root element, so there is one IntersectionObserver per instance and no scroll listener. - Only the properties in your `variants` are animated; the defaults touch `opacity` only, which the browser can composite without layout. - `once` is implemented with a `hasAnimated` ref and a watcher on visibility, so latching costs one boolean rather than a second observer. - `finalVariants` is a `computed`, so changing `variants` after mount re-derives the states without recreating the component. `viewOptions.margin` accepts any valid IntersectionObserver root margin, such as `'0px 0px -100px 0px'` to trigger slightly before the element is fully on screen. The value is read once when the observer is created, so set it up front rather than mutating it after mount. ## Sitemap See the full [sitemap](https://nuxt-motion-block.pages.dev/sitemap.md) for all pages.