How do I loop number counter after 10 seconds

I’m trying to get the following number counter to start only once scrolled to and then have it loop after 10 seconds, could anyone please assist me

const counterAnim = (qSelector, start = 0, end, duration = 8000) => {
 const target = document.querySelector(qSelector);
 let startTimestamp = null;
 const step = (timestamp) => {
  if (!startTimestamp) startTimestamp = timestamp;
  const progress = Math.min((timestamp - startTimestamp) / duration, 1);
  target.innerText = Math.floor(progress * (end - start) + start);
  if (progress < 1) {
   window.requestAnimationFrame(step);
  }
 };
 window.requestAnimationFrame(step);
};
//#endregion - end of - number counter animation

document.addEventListener("DOMContentLoaded", () => {
 counterAnim("#count1", 0, 10000,8000);
 counterAnim("#count2", 0, 40, 8000);
 counterAnim("#count3", 0, 5, 8000);
});
<div class="ohio-heading-sc heading text-left" id="ohio-custom-61aa36a52809a">
<h2 class="title"><span id="count1" class="display-4"></span>+  </h2>
<p class="subtitle">lorem ipsum</p>
</div>

<div class="ohio-heading-sc heading text-left" id="ohio-custom-61aa36a52809a">
<h2 class="title"><span id="count2" class="display-4"></span>+  YEARS</h2>
<p class="subtitle">lorem ipsum</p>
</div>

<div class="ohio-heading-sc heading text-left" id="ohio-custom-61aa36a52809a">
<h2 class="title"><span id="count3" class="display-4"></span>   YEAR</h2>
<p class="subtitle">lorem ipsum</p>
</div>