Add a callback if the element is on the viewport

onViewport.js

function onViewport(elem, callback, options = {}) {
  if (elem instanceof Element) elem = [elem]
  
  // Initial option
  // Unobserve the element if it is on the viewport for optimizing purposes
  const { abortEarly = true } = options

  let counter = 0
  const observer = new IntersectionObserver((entries, self) => {
    entries.forEach((el) => {
      if (el.isIntersecting) {
        callback(el.target, counter)
        counter++
        abortEarly && self.unobserve(el.target)
      }
    })
  }, options)
  elem.forEach((el) => {
    observer.observe(el)
  })

  return {
    destroy: () => {
      observer.disconnect()
    },
  }
}

// Usage
const buttons = document.querySelectorAll("button");
onViewport(buttons,(element,i)=>{
   element.style.transform = `translateY(${i}*100px)`
})