Chapter 116: useInView

Core Idea

Use Motion for Vue's tiny useInView hook (0.6kb) to detect when elements enter the viewport. Track visibility, trigger effects & customize detection easily.

Key Concepts

• Effects: useInView is vanilla Vue ref state
• root: By default
• margin: Default: "0px"
• once: Default: false
• initial: Default: false
• amount: Default: "some"
• Example: > Newsletter
• Stay in the loop.: Deep dives on animation
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

<script setup>
import { useInView } from 'motion-v'

const domRef = ref()
const isInView = useInView(domRef)
</script>

<template>
  <div ref="domRef" />
</template>

• What it demonstrates: Core usage pattern for useInView.

Key Takeaways

1. useInView supports Effects.
2. useInView supports root.
3. useInView supports margin.

Connects To

• Vue scroll animation: related Motion doc page.
• useScroll: related Motion doc page.
• Vue animations with Motion for Vue: related Motion doc page.
• Scroll-triggered animation example & tutorial for JavaScript: related Motion doc page.