inView

inView detects when elements enter and leave the viewport.

inView("li", ({ target }) => {
  animate(target, { opacity: 1 })
})

This information can be used to create effects like:

• Animating elements as they scroll in/out of view.
• Pausing animations while off-screen.
• Lazy loading content.
• Automatically start/stop video playback

inView is built on the browser's native Intersection Observer API for the best performance and tiny filesize (0.5kb).

React users: inView can be used with React (inside an effect), but the whileInView animation prop and useInView state hook provide simpler, React-specifics APIs.

#Usage

Import inView from Framer Motion.

// React
import { inView } from "framer-motion"

// Universal
import { inView } from "framer-motion/dom"

inView can accept a selector, an Element, or an array of Elements.

// Selector
inView("section", callback)

// Element
const box = document.getElementById("box")
inView(box, callback)

By default, the provided callback will fire just once, when the element first enters the viewport.

inView(element, () => {
  console.log("Element has entered the viewport")
})

This callback is provided an IntersectionObserverEntry object which contains information on the intersection.

inView("a", (info) => {
  console.log("The link  ", info.target.id, " has entered the viewport")
})

#Exiting the viewport

A function returned from this callback will fire when the element leaves the viewport.

inView(element, (info) => {
  const animation = animate(info.target, { opacity: 1 })

  // This will fire when the element leaves the viewport
  return (leaveInfo) => animation.stop()
})

Additionally, the gesture will also continue to fire as the element enters/leaves the viewport.

#Change viewport

By default, inView detects when the provided element(s) enter/leave the default viewport: The browser window.

But it can also detect when the element(s) enter/leave the viewport of a scrollable parent element, by passing that element to the root option:

const carousel = document.querySelector("#carousel")

inView("#carousel li", callback, { root: carousel })

#Stop detection

inView returns a function that, when fired, will stop gesture detection.

const stop = inView(element, callback)

stop()

#Options

#root: RefObject<HTMLElement>

By default, useInView will track the visibility of an element as it enters/leaves the window viewport. Set root to be the ref of a scrollable parent, and it'll use that element to be the viewport instead.

function Carousel() {
  const container = useRef(null)
  const ref = useRef(null)
  const isInView = useInView({ root: container })
  
  return (
    <div ref={container} style={{ overflow: "scroll" }}>
      <div ref={ref} />
    </div>
  )
}

#margin: string

One or more margins to apply to the root element or window viewport. This can extend or contract the point at which the element is considered inside the viewport.

Margins must be defined as px or %.

inView(
  onEnter,
  element,
  { margin: "0px 100px -50px 0px" }
)

Note: For browser security reasons, margin won't take affect within cross-origin iframes unless `root` is explicitly defined.

#once: boolean

By setting once: true, once an element is in view, inView will stop observing the element and always return true.

inView(() => {}, element, { once: true })

#amount: "some" | "all" | number

The amount of an element that needs to enter the viewport for inView to return true.

This is defined as a number between 0 and 1, where 0 is some or any of the element, and 1 is all of the element.