How to make CounterUp jQuery plugin run only once?

I am using a pretty popular jQuery counter plugin to add some more functionality to a site that I am building. The plugin runs great and I am not getting any errors but the plugin runs whenever you scroll down to it. The issue is I want it to run only once no matter how many times you scroll over it, unless the page is refreshed of course. The plugin uses Waypoints.js to activate it's counter function and I am using a CDN to call both of them. I am just curious if there is anyway to possibly just make it run once... any help is appreciated.

My function is simple but goes as follows:

$('.bold').counterUp({
delay: 10,
time:   1000,
triggerOnce:true
})

The trigger once is obviously not working. The HTML goes as follows:

<p class"bold">200</p>

and it is wrapped in a document.ready() script.

I have no idea if the problem lies in Waypoints or JS but there is almost no documentation on how to run the counter only once...

Solution

In order to get your counter working properly, unfortunately you need to downgrade waypoints to v2.0.3. I also downgraded jQuery to v1.12.4. I agree downgrading is bad practice but in the meantime you can submit an issue request on github.

Also you can try experimenting with different versions to see the highest versions you can use that don't produce the bug.

jQuery(document).ready(function($) {
  $('.bold').counterUp({
    delay: 10,
    time: 1000,
  });
});

div {
  height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>


<div class="one"></div>

<div class="two">
  <p class="bold">100</p>
</div>