Uruchomienie licznika w momencie pokazania sekcji

Cześć, zrobiłem sobie licznik z animacją na podstawie tego tutoriala. Wszystko działa, jednak chciałbym wprowadzić jedną zmianę. Obecnie licznik startuje od razu po odświeżeniu strony. Chciałbym, aby animacja uruchamiała się dopiero, gdy użytkownik przescrolluje do sekcji strony w której jest umieszczony. U mnie licznik jest na samym dole, więc zanim użytkownik dojdzie do tej sekcji animacja jest już ukończona i nikt tego nie widzi. Czy ktoś mógłby coś doradzić? Jestem totalnie zielony. Oto kod odpowiedzialny za licznik:

let valueDisplays = document.querySelectorAll(".num");
let interval = 4000;

valueDisplays.forEach((valueDisplay) => {
  let startValue = 0;
  let endValue = parseInt(valueDisplay.getAttribute("data-val"));
  let duration = Math.floor(interval / endValue);
  let counter = setInterval(function () {
    startValue += 1;
    valueDisplay.textContent = startValue;
    if (startValue == endValue) {
      clearInterval(counter);
    }
  }, duration);
});

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Chyba dobrze, żebyś miał offsetTop tego elementu z animacją. Potem w body onScroll="if(document.body.offsetTop==element.offsetTop){licznik.start();}" Albo pomóż uzytkownikowi i zrób element.zlicznikiem.scrollIntoView();