Круг Прогресс Css + Waypoint.js

Question

У меня прогресс по кругу (чистый CSS) и все в порядке.Анимация идеальна, остановитесь именно там, где я хочу.

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

Спасибо за помощь!

$(document).ready(function() {
  $('.progress-value').waypoint(function() {
    $('.progress-value').css({
      animation: "anima"
    });
  }), { offset: '1000px' }
});

.scroll {
  height:1000px
}

.progress-value {
  stroke-dasharray: 339.292;
  stroke-dashoffset: 84.823;
  -webkit-animation: anima 3s;
          animation: anima 3s;
}
@-webkit-keyframes anima {
  from {
    stroke-dashoffset: 339.292;
  }
  to {
    
    stroke-dashoffset: 84.823;
  }
}
@keyframes anima {
  from {
    stroke-dashoffset: 339.292;
  }
  to {
    stroke-dashoffset: 84.823;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.min.js"></script>

<div class="scroll">
  Space Height for scroll
</div>
<svg width="120" height="120" viewBox="0 0 120 120">
  <circle cx="60" cy="60" r="54" fill="none" stroke="#dededf" stroke-width="5" />
  <circle class="progress-value" cx="60" cy="60" r="54" fill="none" stroke="#d75e7a" stroke-width="5" stroke-dasharray="339.292" stroke-dashoffset="84.823" transform="rotate(-90 60 60)"/>
</svg>