1
// 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?

Community
  • 1
  • 1
kevllar
  • 331
  • 1
  • 2
  • 14
  • I've tried using promise(), done(), end(). But those just kill any other animations going-on on the page. I'm stumped. – kevllar Apr 26 '13 at 15:26
  • i dont quite understand what you mean. So everything someone scrolls, the stepNum() gets called? And it's code is the animation from the link you posted? – Alex Apr 26 '13 at 15:27
  • I've added the rest of the code for clarity. – kevllar Apr 26 '13 at 15:29

1 Answers1

0

You should be able to pass a triggerOnce parameter

$('.scene06').waypoint(function() {  
{
    stepNum();
},  
{ 
    offset: 400,
    triggerOnce: true 
});
tymeJV
  • 103,943
  • 14
  • 161
  • 157