js simple fade on scroll (Intersection Observer API)

app.js

const el = document.querySelector('.el')

let options = {
  root: null, // avoiding 'root' or setting it to 'null' sets it to default value: viewport
  rootMargin: '0px',
  threshold: 0.5
}

let observer = new IntersectionObserver(([entry]) => {
  if(entry.isIntersecting) {
    el.classList.add('active')
  } else {
    el.classList.remove('active')
  }
}, options)

observer.observe(el)

index.html

<!--...-->
<style>
h1.el {
  opacity: 0;
  transition: all 400ms ease;
  transform: translateX(-100px);
  margin-bottom: 50vh;
}
h1.el.active {
  opacity: 1;
  transform: translateX(0px);
}
</style>

<p>Scroll</p>
<div style="height: 300vh"></div>
<h1 class="el">Welcome</h1>
<!--...-->