Initiate animation on viewport

[Ignitis]

Hi,

Is there any way I can initiate the odometer animation as soon as the element is in the viewport?

I need to use odometer on a component which is on the 3rd fold of the webpage. I want it to animate as soon as that component is visible in the viewport.

Thank you.
Pri

[jason-mares]

It's possible using jQuery to initiate when the odometer class gets into the viewport:

`
$(document).ready(function(){

$.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() {
  $('.odometer').each(function() {
    if ($(this).isInViewport()) {
        
      setTimeout(function(){
        $('.odometer').html(240000);
      }, 0);
    } else {
    }
  });
});

});
`