How to set up the counter when it is detected

In my project, there should be a counter. I have used the “reveal function”. I want the counter to start when it goes to “reveal function”. And when the bottom-up scrolling is done again, the “function reveal” will be performed again.
Given that I used the “reveal function”, but when the scroll moves from bottom to top, the counter does not start again.
How can I solve this problem?
Thanks in advance for your guidance.

//counter
const counter = (EL) => {

  const duration = 4000; // Animate all counters equally for a better UX

  const start = parseInt(EL.textContent, 10); // Get start and end values
  const end = parseInt(EL.dataset.counter, 10); // PS: Use always the radix 10!

  if (start === end) return; // If equal values, stop here.

  const range = end - start; // Get the range
  let curr = start; // Set current at start position

  const loop = (raf) => {
    if (raf > duration) raf = duration; // Stop the loop
    const frac = raf / duration; // Get the time fraction
    const step = frac * range; // Calculate the value step
    curr = start + step; // Increment or Decrement current value
    EL.textContent = parseInt(curr, 10); // Apply to UI as integer
    if (raf < duration) requestAnimationFrame(loop); // Loop
  };

  requestAnimationFrame(loop); // Start the loop!
};

document.querySelectorAll("[data-counter]").forEach(counter);
//counter

// reveal
      function reveal() {
        var reveals = document.querySelectorAll(".reveal");

        for (var i = 0; i < reveals.length; i++) {
          var windowHeight = window.innerHeight;
          var elementTop = reveals[i].getBoundingClientRect().top;
          var elementVisible = 10;

          if (elementTop < windowHeight - elementVisible) {
            reveals[i].classList.add("active");
          } else {
            reveals[i].classList.remove("active");
          }
        }
      }

window.addEventListener("scroll", reveal);
// reveal
/* reveal */
.reveal {
  position: relative;
  opacity: 0;
}

.reveal.active {
  opacity: 1;
}
/* reveal */
<div class="reveal">
  <span>A: </span>
  <span data-counter="10">0</span>
  <br>
  <span>B: </span>
  <span data-counter="2022">1000</span>
  <br>
  <span>C: </span>
  <span data-counter="0">9999</span>
  <br>
  <span>D: </span>
  <span data-counter="-1000">1000</span>
  <br>
  <span>E: </span>
  <span data-counter="666">0</span>
  <br>
</div>