Intersection Observer Helper Function

intersect.js

// Polyfill
if (typeof window !== 'undefined') {
  require('intersection-observer'); // eslint-disable-line global-require
}
// when elements intersect add css class
export default ({
  elements,
  threshold,
  root = null,
  rootMargin = '0px',
}) => {
  const options = {
    root,
    rootMargin,
    threshold,
  };
  const observer = new IntersectionObserver((entries) => {
    for (let x = 0; x < entries.length; x += 1) {
      const entry = entries[x];
      if (entry.isIntersecting) entry.target.classList.add(entry.target.dataset.classToAdd);
    }
  }, options);
  for (let i = 0; i < elements.length; i += 1) {
    observer.observe(elements[i]);
  }
};