Bootstrap Counter Start On Display

So I found this codepen tutorial that helped me get number counters on my page. It works perfectly however the counter is found down in the footer and the counter actually starts o

Solution 1:

You could check if element is visible in viewport with this:

$.fn.isOnScreen = function(){
    var win = $(window);
    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

};

And then start the timers on scroll like this:

$(document).on( 'scroll', function(){
  $('.timer').each(count).isOnScreen(); 
});

Something like this: https://jsfiddle.net/snb7be2c/

I set new <div> and added some css so it is in footer.

Update

Run animation just once: https://jsfiddle.net/_jakob/snb7be2c/1/