Trigger something when marked element's half percent is visible in viewport.

intersection-observer.js

// define the observer
const observer = new IntersectionObserver((entries) => {
    entries.forEach((/** @type IntersectionObserverEntry */ entry) => {
      if (entry.isIntersecting) {
        const eventIntersecting = new CustomEvent("intersecting");
        entry.target.dispatchEvent(eventIntersecting);
        return;
      }
      const eventNotIntersecting = new CustomEvent("not-intersecting");
      entry.target.dispatchEvent(eventNotIntersecting);
    });
  },
  {
    threshold: 0.5 // if half of the elements in viewport, element is "intersecting"
  }
);

const elements = document.querySelectorAll('.element');
elements.forEach((element) => {
  //bind each element the observer
  observer.observe(element);
  element.addEventListener('intersecting', () => {
    console.log('intersecting:', element);
  });
  element.addEventListener('not-intersecting', () => {
    console.log('not intersecting:', element);
  });
});