Skip to main content

InView

InView is a visibility detection utility that leverages the IntersectionObserver API to monitor when elements enter or leave the viewport.

It provides customizable options for triggering events, delaying visibility changes, and dynamically adding CSS classes to elements based on their visibility state.

Basic Demo​

More demos​

To explore more demos, click here.

Initialization​

InView is easy to initialize:

<h1 id="observable-element">Hello, World!</h1>
import { InView } from "vevet";

const observer = new InView();

observer.on('in', ({ element, direction }) => {
  console.log('do something with', element, direction);
});

observer.addElement(
  document.getElementById('observable-element')
);

InView can add a custom class to an element when it enters the viewport, and remove the class when it leaves the viewport.

To enable this behavior, use data-in-view-class:

<h1 class="observable-element" data-in-view-class="fadeInUp">InView</h1>
Class Behavior

The class from data-in-view-class is added when the element enters the viewport and removed once the element leaves the viewport
(if hasOut: true).
This allows creating fully CSS-driven scroll animations without JavaScript transitions.

Zero-Size Elements

InView cannot detect visibility of elements with display: none or zero height/width.
Ensure the element has a measurable size before adding it to the observer.

Stop observing an element

observer.removeElement(yourElement);

Destroy the InView instance

observer.destroy();

Best Practices​

  • Prefer adding a single InView instance and registering multiple elements instead of creating many observers.
  • Avoid observing extremely large numbers of elements — group content into sections when possible.
  • Use hasOut: false if you only need one-time triggers — this improves performance and reduces callback spam.