animação scroll

animeScroll.scss

[data-anime]{
    opacity: 0;
    transition: all .3s;    
}

[data-anime="left"]{
    transform: translateX(-5rem);
}

[data-anime="right"]{
    transform: translateX(5rem);
}

[data-anime="up"]{
    transform: translateY(5rem);
}

[data-anime].animate{
    opacity: 1;
    transform: translate(0);
}

animeScrolll.html

<div class=".." data-anime="right">
  ...
</div>
<section class=".." data-anime="left">
  ...
</section>
<img class=".." data-anime="...">
 

animeScrolll.js

const debounce = function (func, wait, immediate) {
  let timeout
  return function (...args) {
    const context = this
    const later = function () {
      timeout = null
      if (!immediate) func.apply(context, args)
    }
    const callNow = immediate && !timeout
    clearTimeout(timeout)
    timeout = setTimeout(later, wait)
    if (callNow) func.apply(context, args)
  }
}

const target = document.querySelectorAll('[data-anime]')

function animeScroll () {
  const windowTop = window.pageYOffset + ((window.innerHeight * 3) / 4)
  target.forEach(element => {
    if (windowTop > element.offsetTop) {
      element.classList.add('animate')
    } else {
      element.classList.remove('animate')
    }
  })
}

animeScroll()

if (target.length) {
  window.addEventListener('scroll', debounce(() => {
    animeScroll()
  }, 200))
}