observe.js

// Elements with `data-observe` toggle `data-visible`
// between `true` and `false`

if ('IntersectionObserver' in window) {
  const callback = (entries, observer) => {
    entries.forEach(entry => {
      entry.target.setAttribute('data-visible', entry.isIntersecting)
    })
  }
  
  const observer = new IntersectionObserver(callback)
  const targets = document.querySelectorAll('[data-observe]')
  targets.forEach(t => observer.observe(t))
}