How to apply css animation to a specific section when it appears in the viewport

I have a section that the animation currently only applies on page load but I would like the animation to be applied when the section appears on the screen each time I tried using the observer method for the specific class and an in ViewPort function but it doesn’t seem to be working as the animation isn’t applying when that section occurs in the page

html section:

<section class="next-gen-agency" >
  <div class="container" style="display: flex; justify-content: center; align-items: center;">
    <div style="max-width: 70rem;" >
      <div style="display: flex; flex-direction: column; gap: 2rem; margin-top: 2rem;">
        <h1
          style="font-size: 4rem; font-weight: bold; background-image: linear-gradient(to right, #00e0ff, #ff007a); -webkit-background-clip: text; background-clip: text; color: transparent;">
          The Next Generation Agency.
        </h1>
        <!-- <p style="max-width: 40rem; font-size: 1.25rem; color: #c21f71">
          Our team of experts at Strive Now Management use a specialized approach to cater to your unique needs. We
          prioritize your success by understanding your goals and tailoring our strategies to help you thrive on the
          platform.
        </p> -->
        <div class="stats-div" style="display: flex; justify-content: center; align-items: center; gap: 3rem;">
          <div style="display: flex; flex-direction: column; align-items: center;">
            <h2 class="agency-stats" style="font-size: 2.5rem; font-weight: bold;">60+</h2>
            <p class="agency-stats" style="font-size: 1rem; font-weight: bold;">ACCOUNTS MANAGED</p>
          </div>
          <div class="stats-div" style="display: flex; flex-direction: column; align-items: center;">
            <h2 class="agency-stats" style="font-size: 2.5rem; font-weight: bold;">25+</h2>
            <p class="agency-stats" style="font-size: 1rem; font-weight: bold;">BRAND COLLABORATIONS</p>
          </div>
          <div class="stats-div" style="display: flex; flex-direction: column; align-items: center;">
            <h2 class="agency-stats" style="font-size: 2.5rem; font-weight: bold;">£100k+</h2>
            <p class="agency-stats" style="font-size: 1rem; font-weight: bold;">TOTAL EARNINGS</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

css styles:

.next-gen-agency {
  animation: slideIn 1.5s ease-in-out forwards;
  opacity: 0;
  background-color: #E4D8D3;
  margin-top: 8rem;
}

.agency-stats {
  background-image: linear-gradient(to right,
    #00e0ff,
    #3eb6d4);
  -webkit-background-clip: text;
  background-clip: text; color: transparent;
}

javascript code:

 <script>
  // Function to check if html element is in the viewport
  function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }
  const startAnimation = (entries, observer) => {
    entries.forEach(entry => {
      entry.target.classList.toggle("slideIn", entry.isIntersecting);
    });
  };

  const observer = new IntersectionObserver(startAnimation);
  const options = { root: null, rootMargin: '0px', threshold: 1 };

  const elements = document.querySelectorAll('.next-gen-agency');
  elements.forEach(el => {
    console.log("el = ", el);
    observer.observe(el, options);
  });
</script>