Website fade in animation IntersectionObserver

Question

I have a section called 'creations' where I am displaying three videos that play when the user hovers over them, and they are placed next to each other. When the user scrolls down and the section is in the viewport I want it to smoothly fade in from the left.

I tried it by adding hidden and faded-in classes, but I have a problem where if the user scrolls down the website and the section comes into the viewport it keeps on being hidden and doesnt get the classlist faded-in. It only gets the class of `faded-in if I reload the website and am already looking at the section.

document.addEventListener('DOMContentLoaded', function() {
  // Function to start or reset typing animation
  function startOrResetTypingAnimation() {
    /*
    var typed = new Typed(".auto-projecten", {
      strings: [".PROJECTEN"],
      typeSpeed: 160
    });
    */
  }

  // Function to handle the intersection of the target element
  function handleIntersection(entries, observer) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // Target element is inside the viewport
        startOrResetTypingAnimation();
        observer.unobserve(entry.target); // Stop observing once animation is triggered
        // Remove the 'hidden' class when it's intersecting
        entry.target.classList.remove('hidden');
        entry.target.classList.add('faded-in');
      } else {
        // Add the 'hidden' class when it's not intersecting
        entry.target.classList.remove('faded-in');
        entry.target.classList.add('hidden');
      }
    });
  }

  // Using Intersection Observer to trigger typing animation and fade-in effect
  var observer = new IntersectionObserver(handleIntersection, {
    threshold: 0.5
  });
  var creationsSection = document.querySelector(".creations");
  if (creationsSection) {
    observer.observe(creationsSection);
  }
});

.hidden {
  opacity: 0;
  filter: blur(5 px);
  transform: translateX(-100 %);
  transition: all 1 s;
}

.faded-in {
  opacity: 1;
  transform: translateX(0 %);
  transition: all 1 s;
}

.creations-col:nth-child(2) {
  transition - delay: 200 ms;
}

.creations-col:nth-child(3) {
  transition - delay: 400 ms;
}

.creations-col:nth-child(4) {
  transition - delay: 600 ms;
}

<section class="creations">
  <h1>ONZE<span class="auto-projecten"></span></h1>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deleniti, iure?</p>
  <div class="row">
    <div class="creations-col">
      <video id="enzolucavideo" src="images/enzoluca.mp4" preload="auto" poster="images/enzoluca.png"></video>
      <div class="layer">
        <h3>Enzo Luca</h3>
      </div>
    </div>
    <div class="creations-col">
      <video id="expertvideo" src="images/expert.mp4" preload="auto" poster="images/expert.png"></video>
      <div class="layer">
        <h3>Expert</h3>
      </div>
    </div>
    <div class="creations-col">
      <video id="keukenmaxxvideo" src="images/keukenmaxx.mp4" preload="auto"></video>
      <div class="layer">
        <h3>Keukenmaxx</h3>
      </div>
    </div>
  </div>
</section>