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 and scrolling direction. InView automatically detects the direction from which elements enter or leave the viewport, enabling directional animations and interactions.

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('Element entered from:', direction);
  // direction can be: 'fromBottom', 'fromTop', 'fromLeft', or 'fromRight'
});

// addElement returns a cleanup function
const stopObserving = observer.addElement(
  document.getElementById('observable-element'),
);

// Later, you can stop observing this specific element
stopObserving();

CSS Class Management

InView can automatically add and remove CSS classes based on element visibility. This enables fully CSS-driven scroll animations without JavaScript transitions.

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

Simple class (same animation for all directions):

<h1 data-in-view-class="fadeIn">Animated Element</h1>

Directional classes (different animations based on scroll direction):

<!-- Vertical scrolling: fadeInUp when from bottom, fadeInDown when from top -->
<h1 data-in-view-class="fadeInUp|fadeInDown">Directional InView</h1>

<!-- Horizontal scrolling: fadeInLeft when from right, fadeInRight when from left -->
<h1 data-in-view-class="fadeInLeft|fadeInRight">Horizontal Directional</h1>

The syntax is direct|reverse, where:

• direct is applied when the element enters from the default direction (bottom for vertical, right for horizontal)
• reverse is applied when entering from the opposite direction (top for vertical, left for horizontal)

If only one class is provided (no pipe), it's used for all directions.

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.

Managing Elements

Stop observing a specific element:

observer.removeElement(yourElement);

Destroy the InView instance:

observer.destroy();

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.

Direction Detection

InView automatically detects the direction from which elements enter or leave the viewport. This information is available in callbacks and can be used to create directional animations.

The direction values are:

• fromBottom - Element enters/leaves from below (vertical scrolling)
• fromTop - Element enters/leaves from above (vertical scrolling)
• fromLeft - Element enters/leaves from the left (horizontal scrolling)
• fromRight - Element enters/leaves from the right (horizontal scrolling)

Direction is determined by comparing the element's position to the viewport center. For initial page load, the direction defaults to the natural scroll direction (fromBottom for vertical, fromRight for horizontal).

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.
• Leverage data-in-view-class for CSS-only animations when possible — it's more performant than JavaScript-based transitions.
• Use the direction parameter in callbacks to create context-aware animations and interactions.