Number Animation starting on scroll down

Question

I've used the following Number Animation on my website: http://codepen.io/syedrafeeq/details/rcfsJ/

However, the animation do not start at that specific page section but starts only when I refresh the page. I would like it to trigger when the visitor scroll down till that page section.

How can I make this?

JQuery

(function ($) {
    $.fn.countTo = function (options) {
        options = options || {};

        return $(this).each(function () {
            // set options for current element
            var settings = $.extend({}, $.fn.countTo.defaults, {
                from:            $(this).data('from'),
                to:              $(this).data('to'),
                speed:           $(this).data('speed'),
                refreshInterval: $(this).data('refresh-interval'),
                decimals:        $(this).data('decimals')
            }, options);

            // how many times to update the value, and how much to increment the value on each update
            var loops = Math.ceil(settings.speed / settings.refreshInterval),
                increment = (settings.to - settings.from) / loops;

            // references & variables that will change with each update
            var self = this,
                $self = $(this),
                loopCount = 0,
                value = settings.from,
                data = $self.data('countTo') || {};

            $self.data('countTo', data);

            // if an existing interval can be found, clear it first
            if (data.interval) {
                clearInterval(data.interval);
            }
            data.interval = setInterval(updateTimer, settings.refreshInterval);

            // initialize the element with the starting value
            render(value);

            function updateTimer() {
                value += increment;
                loopCount++;

                render(value);

                if (typeof(settings.onUpdate) == 'function') {
                    settings.onUpdate.call(self, value);
                }

                if (loopCount >= loops) {
                    // remove the interval
                    $self.removeData('countTo');
                    clearInterval(data.interval);
                    value = settings.to;

                    if (typeof(settings.onComplete) == 'function') {
                        settings.onComplete.call(self, value);
                    }
                }
            }

            function render(value) {
                var formattedValue = settings.formatter.call(self, value, settings);
                $self.html(formattedValue);
            }
        });
    };

    $.fn.countTo.defaults = {
        from: 0,               // the number the element should start at
        to: 0,                 // the number the element should end at
        speed: 1000,           // how long it should take to count between the target numbers
        refreshInterval: 100,  // how often the element should be updated
        decimals: 0,           // the number of decimal places to show
        formatter: formatter,  // handler for formatting the value before rendering
        onUpdate: null,        // callback method for every time the element is updated
        onComplete: null       // callback method for when the element finishes updating
    };

    function formatter(value, settings) {
        return value.toFixed(settings.decimals);
    }
}(jQuery));

jQuery(function ($) {
  // custom formatting example
  $('.count-number').data('countToOptions', {
    formatter: function (value, options) {
      return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
    }
  });

  // start all the timers
  $('.timer').each(count);  

  function count(options) {
    var $this = $(this);
    options = $.extend({}, options || {}, $this.data('countToOptions') || {});
    $this.countTo(options);
  }
});

My HTML:

<section id="Four" class="wrapper style3">
                <div class="inner">
                    <div class="container">
                        <div class="row">
                                <div class="two columns">
                                <i class="fa fa-truck fa-5x"></i>
                                <h3>A Fleet of</h3>
                                <div class="counter col_fourth">
                                <h2 class="timer count-title count-number" data-to="120" data-speed="2000"></h2>
                                </div>
                                <p class="text-box">TRUCKS</p>
                            </div>
                                <div class="two columns">
                                <i class="fa fa-users fa-5x"></i>
                                <h3>Involving</h3>
                                <div class="counter col_fourth">
                                <h2 class="timer count-title count-number" data-to="160" data-speed="2000"></h2>
                                </div>
                                <p class="text-box">EMPLOYEES</p>
                            </div>
                                <div class="two columns">
                                <i class="fa fa-cubes fa-5x"></i>
                                <h3>Loading</h3>
                                <div class="counter col_fourth">
                                <h2 class="timer count-title count-number" data-to="6686" data-speed="2000"></h2>
                                </div>
                                <p class="text-box">FTL LOADS IN 2016</p>
                            </div>
                                <div class="two columns">
                                <i class="fa fa-leaf fa-5x"></i>
                                <h3>Emissions</h3>
                                <div class="counter col_fourth">
                                <h2 class="timer count-title count-number" data-to="100" data-speed="2000"></h2>
                                </div>
                                <p class="text-box">100% EURO 6</p>
                            </div>
                                <div class="two columns">
                                <i class="fa fa-compress fa-5x"></i>
                                <h3>Trailers</h3>
                                <div class="counter col_fourth">
                                <h2 class="timer count-title count-number" data-to="160" data-speed="2000"></h2>
                                </div>
                                <p class="text-box">TRAILERS</p>
                            </div>
                                <div class="two columns">
                                <i class="fa fa-calendar fa-5x"></i>
                                <h3>Since</h3>
                                <div class="counter col_fourth">
                                <h2 class="timer count-title count-number" data-to="1991" data-speed="2000"></h2>
                                </div>
                                <p class="text-box">25 YEARS OF SERVICE</p>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </section>**strong text**

Answer 1

You can use jQuery Waypoints Plugin to trigger the animation when you scroll to that section. Download library and import it in you HTML. And then just determine the point where it should be triggered. Something like this.

var waypoint = new Waypoint({
  element: document.getElementById('Four'),
  handler: function(direction) {
    //Put here or call your javascript code for animation
  },
  offset: 50%
})