A tiny (2KB), no-dependency JavaScript module that adds a class to elements when they become visible, letting you control animations with CSS. Optionally, automatically add staggered timing between elements.

There are no default animations included, you define them yourself in CSS.

Example: https://animate-when-visible-example.netlify.app/

• Adds a class to elements when they enter the viewport
• Supports staggered animations with automatic transition delays
• Includes sorting logic so that elements fire based on their order in the DOM
• Optionally handles dynamically added content via MutationObserver
• Provides an optional callback function for each intersection
• Provides lifecycle methods: destroy() and refresh()
• Lightweight, no dependencies

Because I couldn't find what I wanted in the existing options.

Most existing scroll animation libraries are either:

• Heavy: They add a lot of extra JavaScript and CSS that aren’t necessary for simple visibility-triggered animations.
• Outdated: Many are based on scroll listeners, which can be detrimental to peformance. This module uses IntersectionObserver and requestAnimationFrame to ensure light and performant effects.
• Opinionated: They come bundled with animations that you would never use.

This module:

• Provides the essential logic for visibility detection.
• Leaves the animation as part of the CSS presentation layer.
• Makes staggered animations dead simple with built-in delay handling.

npm install animate-when-visible

import animateWhenVisible from 'animate-when-visible';

animateWhenVisible();

By default, all elements with the .awv-animate class will have the configured animationClass added when they become visible.

You can pass an options object:

const animator = animateWhenVisible({
  threshold: 0.1,
  staggerDelay: 100,
  staggerDelaySlow: 250,
  animationClass: 'awv-visible',
  staggerClass: 'awv-stagger',
  staggerSlowClass: 'awv-stagger-slow',
  targetSelector: '.awv-animate',
  staggerContainerSelector: '.awv-stagger-container',
  onVisible: null,
  observeMutations: false,
  animateOnScrollDownOnly: false,
});

import { destroy, refresh } from 'animate-when-visible';

// Stop observers
destroy();

// Re-observe elements
refresh();

<div class="awv-animate"></div>

<div class="awv-stagger-container">
  <div class="awv-animate awv-stagger fade-in"></div>
  <div class="awv-animate awv-stagger fade-in"></div>
  <div class="awv-animate awv-stagger fade-in"></div>
</div>

• .awv-stagger-container groups a set of staggered elements together. This prevents long delays when many elements appear on the screen at once.
• .awv-stagger and .awv-stagger-slow control the stagger timing.

Add a transition or animation to your animationClass:

/* Fade in & slide up */
.fade-in {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.awv-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Simple opacity fade */
.fade-in-opacity {
  opacity: 0;
  transition: opacity 1s ease;
}

.fade-in-opacity.awv-visible {
  opacity: 1;
}

• Stagger delays are applied dynamically via JS as transition delays, so you don’t need to write CSS for each element.

• Modern browsers with IntersectionObserver support.
• Polyfills required for IE11 and older browsers.

MIT