fade in and out elements on scroll - css js html

HTML

<div class="container">
  <div class="fade fadeOut">Element 1</div>
  <div class="fade fadeOut">Element 2</div>
  <div class="fade fadeOut">Element 3</div>
  <div class="fade fadeOut">Element 4</div>
  <div class="fade fadeOut">Element 5</div>
  <div class="fade fadeOut">Element 6</div>
  <div class="fade fadeOut">Element 7</div>
  <div class="fade fadeOut">Element 8</div>
  <div class="fade fadeOut">Element 9</div>
  <div class="fade fadeOut">Element 10</div>
</div>

CSS

.fade {
  margin: 50px;
  padding: 50px;
  background-color: lightgreen;
  transition: opacity 0.7s ease-in;
}

.fadeOut { opacity: 0; }
.fadeIn { opacity: 1; }

Javascript

const observerOptions = {
  root: null,
  rootMargin: "0px",
  threshold: 0.7
};

function observerCallback(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // fade in observed elements that are in view
      entry.target.classList.replace('fadeOut', 'fadeIn');
    } else {
      // fade out observed elements that are not in view
      entry.target.classList.replace('fadeIn', 'fadeOut');
    }
  });
}

const observer = new IntersectionObserver(observerCallback, observerOptions);

const fadeElms = document.querySelectorAll('.fade');
fadeElms.forEach(el => observer.observe(el));