<section>
  <h1 class="hidden">
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </h1>
</section>

<section>
  <h1 class="hidden">
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </h1>
</section>

<section>
  <h1 class="hidden">
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </h1>
</section>

<section>
  <h1 class="hidden">
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </h1>
</section>

@import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected];300;400;500;700;900&display=swap');

*{
  margin:0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

section{
  height: 100vh;
  background-color: #1B1F24;
  color: #ffffff;
  display: grid;
  place-items: center;
}

.hidden{
  opacity: 0;
  transform: translateX(100px);
  transition: all .6s;
}

.show {
  opacity: 1;
  transform: translateX(0px);
}

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if(entry.isIntersecting){
      entry.target.classList.add('show');
    } else {
      entry.target.classList.remove('show');
    }
  })
})

const hiddenElements = document.querySelectorAll(".hidden");
hiddenElements.forEach((el) => observer.observe(el));