как запустить навигационную анимацию с jquery

Question

$(window).scroll(function() {
  var windscroll = $(window).scrollTop();
  if (windscroll >= 100) {
    $('section').each(function(i) {
      if ($(this).position().top <= windscroll + 200) {
        $('.navbar-nav a.active').removeClass('active');
        $('.navbar-nav a').eq(i).addClass('active');
      }
    });

  } else {
    $('.navbar-nav a.active').removeClass('active');
    $('.navbar-nav a:first').addClass('active');
  }

});

.active {
  color: $color-primary;
  &:after {
    content: '';
    margin: auto;
    display: block;
    width: 50%;
    height: 1.5px;
    margin-top: .4em;
    animation: widthNav 250ms ease-in;
    background: $bg-primary;
    transition: all ease-in-out 250ms;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light sticky-top">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#!" data-scroll="waw">Profile Singkat</a>
      <a class="nav-item nav-link" href="#!" data-scroll="wew">Pengalaman</a>
      <a class="nav-item nav-link" href="#!" data-scroll="wow">Projek</a>
      <a class="nav-item nav-link" href="#!">Penghargaan</a>
    </div>
  </div>
</nav>

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