Chapter 73: inView

Core Idea

Learn to use Motion's inView function to detect when elements enter and leave the viewport. Built on Intersection Observer for optimal performance (0.5kb), it's ideal for scroll-triggered animations, lazy-loading, and more. Customize detection with root, margin, and amount options.

Key Concepts

• Leaving the viewport: A function returned from this callback will fire when the element leaves the viewport.
• Change viewport: By default
• Stop detection: inView returns a function that
• 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
• root: Default: window
• margin: Default: 0
• amount: Default: "some"
• Stay in the loop.: Deep dives on animation
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

inView("#carousel li", (element) => {
  animate(element, { opacity: 1 })
})

• What it demonstrates: Core usage pattern for inView.

Key Takeaways

1. Animating elements when they scroll into and out of view.
2. Deactivating animations when they're no longer visible.
3. Lazy-loading content.
4. Automatically start/stop videos.

Connects To

• hover(): related Motion doc page.
• press(): related Motion doc page.
• Scroll animations in JavaScript with scroll(): related Motion doc page.
• Scroll-triggered animation example & tutorial for JavaScript: related Motion doc page.