Chapter 41: useInView

Core Idea

Switch React state when an element enters/leaves the viewport.

Key Concepts

• Effects: useInView is vanilla React state
• root: By default
• margin: Default: "0px"
• once: Default: false
• initial: Default: false
• amount: Default: "some"
• Find & fix animation performance issues with your agent.: MotionScore for Agents grades animations in your source code S to F and hands your agent s
• Example: 1.
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

const ref = useRef(null)
const isInView = useInView(ref)

return <div ref={ref} />

• What it demonstrates: Core usage pattern for useInView.

Key Takeaways

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

Connects To

• React scroll animation: related Motion doc page.
• useScroll: related Motion doc page.
• usePageInView: related Motion doc page.
• Scroll-triggered animation example & tutorial for JavaScript: related Motion doc page.