InView

An effect component that triggers entrance transitions or animations when it passes into the viewport. 
Detection of the element’s visibility in the viewport is performed using the Intersection Observer API.

Basic Animation

Use the activeClassName and inactiveClassName props to apply CSS classes when the element is in or out of view.

Render Props

Use the isInView render prop to access the visibility state directly.
If you are using RSC remember to add the use client directive when accesing render props.

Customizing

:root {
  --ex-in-view-delay: 0;
  --ex-in-view-ease: var(--ease-out);
  --ex-in-view-duration: 500ms
}

API