Анимация jQuery останавливается, когда пользователь прокручивает

Question

Я использую на своем сайте несколько числовых элементов, которые начинают подсчитывать после попадания в видимую область области просмотра.

Эта часть работает до тех пор, пока пользователь не прокрутит страницу вручную.Если пользователь прокручивает вверх или вниз, анимация останавливается на секунду и повторяется, когда пользователь больше не прокручивает.Это выглядит очень глючно.

Если я пытаюсь воспроизвести проблему в скрипке, один и тот же код всегда работает без "заикания"?

jQuery(function($) {
  $(function($, win) {
    $.fn.inViewport = function(cb) {
      return this.each(function(i, el) {
        function visPx() {
          var H = $(this).height(),
            r = el.getBoundingClientRect(),
            t = r.top,
            b = r.bottom;
          return cb.call(el, Math.max(0, t > 0 ? H - t : (b < H ? b : H)));
        }
        visPx();
        $(win).on("resize scroll", visPx);
      });
    };
  }(jQuery, window));

  $(".fig-number").inViewport(function(px) {
    // if px>0 (entered V.port) and
    // if prop initNumAnim flag is not yet set = Animate numbers
    if (px > 0 && !this.initNumAnim) {
      this.initNumAnim = true; // Set flag to true to prevent re-running the same animation

      $(this).prop('Counter', 0).animate({
        Counter: $(this).text()
      }, {
        duration: 10000,
        step: function(now) {
          $(this).text(Math.ceil(now));
        }
      });
    }
  });
});

html,
body {
  height: 100%;
}

.spacer {
  height: 100%;
  width: 100%;
  display: block;
  background: red;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="spacer">
  scroll down
</div>
<div class="number-box">
  <h1 class="fig-number">1000</h1>
  <h1 class="fig-number">1500</h1>
</div>
<div class="spacer">
  scroll down
</div>
<div class="number-box">
  <h1 class="fig-number">2000</h1>
  <h1 class="fig-number">2500</h1>
</div>
<div class="spacer">
  scroll down
</div>
<div class="number-box">
  <h1 class="fig-number">3000</h1>
  <h1 class="fig-number">3500</h1>
</div>

Рабочая скрипка (тот же код): https://jsfiddle.net/JSCray/r7g0vn93/3/