Animation once the section is in the viewport

Site URL: https://viola-iguana-ezk8.squarespace.com

Hi all,

I would like to animate a Counter once the section is in the viewport. I managed to get the animation, but it happens even when the section is not displayed, so by the time the user is scrolling on the page, the counter animation is over.

I am ok with coding, but I am quite new with html and javascript, so I need some help to code it.

Here is my code section highly inspired by this webpage:

Thank you very much for your help.

------

<div class="wrapper">
    <div class="counter col_fifth">
      <i class="fa fa-drivers-license-o"></i>
      <h2 class="timer count-title count-number" data-to="6" data-speed="4000"></h2>
       <p class="count-text ">Staff Members</p>
    </div>

    <div class="counter col_fifth">
      <i class="fas fa-microscope"></i>
      <h2 class="timer count-title count-number" data-to="21" data-speed="4000"></h2>
      <p class="count-text ">Microscopes</p>
    </div>

    <div class="counter col_fifth">
      <i class="fas fa-user-graduate"></i>
      <h2 class="timer count-title count-number" data-to="54" data-speed="4000"></h2>
      <p class="count-text ">Trained Users</p>
    </div>

    <div class="counter col_fifth">
      <i class="fa fa-eye"></i>
      <h2 class="timer count-title count-number" data-to="27397" data-speed="4000"></h2>
      <p class="count-text ">Hours of Microscope Usage this year</p>
    </div>
      <div class="counter col_fifth end">
      <i class="fas fa-chalkboard-teacher"></i>
      <h2 class="timer count-title count-number" data-to="3715" data-speed="4000"></h2>
      <p class="count-text ">Hours of Workstation Usage this year</p>
    </div>
</div>

<script>
 (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: 100,           // 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);
  }
});

</script>

Thanks a lot for the quick reply.

It's acting a bit weird, because it's refreshing each time I scroll up and down, but I should be able to put a condition to refresh the counter only once.

Thank you very much !

What did you change to get it to refresh only the one time? 

Thanks! 

On 11/19/2020 at 2:35 AM, colinsteinke said:

What did you change to get it to refresh only the one time? 

Thanks! 

Have you solved this yet?

On 11/21/2020 at 8:08 PM, tuanphan said:

Have you solved this yet?

Nope. I haven't had time. And he didn't reply at all.