intersection-observable.js

class Intersector extends HTMLElement {
  constructor() {
    super();
    const threshold = 0;
    var options = {
      root: this.parentElement,
      rootMargin: "-40% 0% -59%",
      threshold: [threshold]
    };

    const callback = (entries, observer) => {
      entries.forEach(entry => {
        if (entry.intersectionRatio > threshold) {
          this.dispatchEvent(new CustomEvent('center', {}));
        }

      });
    };

    var observer = new IntersectionObserver(callback, options);
    observer.observe(this);
  }}

export const register = () => customElements.define("intersection-observable", Intersector)