Animate counter when in viewport

Question

I have a counter which animates to a final number which is defined in the HTML. However I would like this animation to happen once it\'s in the viewport.

I have a fi

Answer 1

Snippet :

(function($) {

  $.fn.visible = function(partial, hidden) {

    var $t = $(this).eq(0),
      t = $t.get(0),
      $w = $(window),
      viewTop = $w.scrollTop(),
      viewBottom = viewTop + $w.height(),
      _top = $t.offset().top,
      _bottom = _top + $t.height(),
      compareTop = partial === true ? _bottom : _top,
      compareBottom = partial === true ? _top : _bottom,
      clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true;

    return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop));
  };

})(jQuery);


// Scrolling Functions
$(window).scroll(function(event) {
  function padNum(num) {
    if (num < 10) {
      return "" + num;
    }
    return num;
  }

  var first = parseInt($('.c1').text());
  var second = parseInt($('.c2').text());

  function countStuffUp(points, selector, duration) { //Animate count
    $({
      countNumber: $(selector).text()
    }).animate({
      countNumber: points
    }, {
      duration: duration,
      easing: 'linear',
      step: function() {
        $(selector).text(padNum(parseInt(this.countNumber)));
      },
      complete: function() {
        $(selector).text(points);
      }
    });
  }

  // Output to first-count
  $(".first-count").each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      countStuffUp(first, '.first-count', 1600);
    }
  });

  // Output to second count
  $(".second-count").each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      countStuffUp(second, '.second-count', 1000);
    }
  });

});

.block {
  height: 1000px;
  background: #eeeeee;
}
.dontShow {
  //display:none;

}

Scroll down to bottom to see counter

  0
  0


  Max Value of count 1 : 25
  
Max Value of count 2 : 78

Refer : Similar