Increment number using animate with comma: Part 2

Question

// Animate the element's value from x to y:
  function stepNum () {
 $({someValue: 40000}).animate({someValue: 45000}, {
  duration: 3000,
  easing:'swing', // can be anything
  step: function() { // called on every step
      // Update the element's text with rounded-up value:
      $('#el').text(commaSeparateNumber(Math.round(this.someValue)));
   }
 });

function commaSeparateNumber(val){
    while (/(\d+)(\d{3})/.test(val.toString())){
    val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
}
return val;
}
}

$('.scene06').waypoint(function() { 
stepNum(); 
}, { offset: 400 }) 

So, the code has evolved a bit.

Since this question.

I've wrapped the increment inside a function. And it's triggered by user scrolling down (via waypoint.js). But how can I get this to animate just once and not repeatedly each time somebody scrolls over it. Ideas?

Answer 1

You should be able to pass a triggerOnce parameter

$('.scene06').waypoint(function() {  
{
    stepNum();
},  
{ 
    offset: 400,
    triggerOnce: true 
});