how do I make this animation trigger on scroll over?

Vote count:

0

I have this working JS fiddle: http://ift.tt/1pfu17R

// Animate the element's value from x to y:
$({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;
}

Now I want to modify it so that it is only triggered when the user is scrolling by the div, not necessarily hovering over it, but the div is visible in his or her screen. Say this div is at the bottom of a long page, by the time the user gets there, the animation is over, and they miss the whole show.

asked 1 min ago

Natalia Rodríguez

1

how do I make this animation trigger on scroll over?