Jump to content

Animation once the section is in the viewport

Go to solution Solved by Beyondspace,

Recommended Posts

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>

Link to comment
  • Solution

Since you are familar with coding I will help you a bit since your site is password protected

replace the line 

$('.timer').each(count);

$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

$(window).on('resize scroll', function() {
    if ($('.timer').isInViewport()) {
        $('.timer').each(count);
    } 
});

reference:

javascript - Jquery check if element is visible in viewport - Stack Overflow

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.