JSFiddle - React, Tailwind, and code Playground

HTML

<div class="scroll"></div>

<div class="counter-container">
  Counter: <span id="counter"></span>
</div>

<div class="scroll"></div>

CSS

.scroll {
  height: 2000px;
}

.counter-container {
  background-color: red;
  color: white;
}

JavaScript

let isIntersected = false;

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    let count = 0;
    if (entry.intersectionRatio > 0 && !isIntersected) {
      isIntersected = true;
      setInterval(() => {
        document.querySelector("#counter").innerText = count;
        count++;
      }, 1000);
    }
  });
});

observer.observe(document.querySelector('.counter-container'))