add animate class when element in viewport

intersectionObserverAPI.js

animateClass() {
  const scroll = window.requestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
  const elementsToShow = document.querySelectorAll('.animate')

  const _self = this
  Array.prototype.forEach.call(elementsToShow, function(element) {
    if (_self.isElementInViewport(element)) {
      element.classList.add('is-visible')
    }
  })

  scroll(this.animateClass)
},

isElementInViewport(el) {
  const rect = el.getBoundingClientRect()
  return (
    (rect.top <= 0 && rect.bottom >= 0) ||
    (
      rect.bottom >= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.top <= (window.innerHeight || document.documentElement.clientHeight)
    ) || (rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight))
  )
}