0

I want to count up a number when the content is in the visible area of the viewport. At the moment, I've an animation but it starts on page load. So the user can't see it when he arrives at the content (bottom of the page).

Here's my JS code to count up the numbers:

$('.counter').each(function() {
  var $this = $(this),
      countTo = $this.attr('data-count');

  $({ countNum: $this.text()}).animate({
    countNum: countTo
  },

  {

    duration: 8000,
    easing:'linear',
    step: function() {
      $this.text(Math.floor(this.countNum));
    },
    complete: function() {
      $this.text(this.countNum);
      //alert('finished');
    }

  });  

});

It is from this example: https://codepen.io/hi-im-si/pen/uhxFn

Is there any way to start the animation when the numbers hit the visible area of the page?

Cray
  • 5,307
  • 11
  • 70
  • 166
  • 1
    This should point you in the right direction. [How to Check if element is visible after scrolling?](https://stackoverflow.com/questions/487073/how-to-check-if-element-is-visible-after-scrolling) – Cliff Rono Feb 13 '19 at 13:02
  • 1
    Personally, I just use the viewport-checker plugin for anything related to this. It has lots of configuration options to get even more use out of it, and it's a very small file (7.52 KB). You can make your code a function, and then run that function when a class or ID is in view with the plugin. https://github.com/dirkgroenen/jQuery-viewport-checker – Sean Feb 13 '19 at 14:13

0 Answers0