Tiny Intersection Observer 🔭

Tiny library to observe intersecting elements! Based on: Intersection Observer API

Features

• Continuously observe element when its intersecting or not
• Observe element only on first intersection

Installation

npm:

  npm install tiny-intersection-observer --save

yarn:

  yarn add tiny-intersection-observer

Usage

observe(
  element,  // element to observe
  function, // when element is intersecting
  function, // optional: when element isn't intersecting
  options  // optional: { rootMargin, threshold }
);

observeOnce(
  element,  // element to observe
  function, // when element is intersecting
  options  // optional: { rootMargin, threshold }
);

Intersection Observer Options

Examples

import { observe, observeOnce } from 'tiny-intersection-observer';

observe(
  document.querySelector('.element'),
  parallaxImages(), 
  resetParallax(), // optional
  { rootMargin: '100px', threshold: 0.2 } // optional
);

observeOnce(
  document.querySelector('.element'), 
  inViewAnimation(), 
  { threshold: 1 } // optional
);