Odometer on Scroll

[linusgrundstrom]

Hi community, 

I've implemented this Odometer (https://github.hubspot.com/odometer/docs/welcome/) on one of my index pages. It's working fine with this script:

<link rel="stylesheet" href="http://github.hubspot.com/odometer/themes/odometer-theme-default.css" />
<script src="http://github.hubspot.com/odometer/odometer.js"></script>

<script>  
  setTimeout(function(){
    sectionone.innerHTML = 789;
}, 1000);

  setTimeout(function(){
    sectiontwo.innerHTML = 459;
}, 1000);

  setTimeout(function(){
    sectionthree.innerHTML = 459;
}, 1000);
</script>

<style>
.odometer {
    font-size: 100px;
  	font-family: Poppins,sans-serif;
  	font-weight: bold;
}
</style>

My problem is that the script loads and runs when the site is loaded but want I really what to achieve is that the script runs when the visitors reaches a certain section while scrolling the page.

Is there anyone who could help me with this?

Kind regards,

Linus

[GillBraysh]

Dont get the solution as it doesn't contain the relevant information for the number to count to?  I havent a clue about javascript so finding it difficult to understand the changes required.

Please could you tell me what javascript I need to include to allow for when the divs are in the viewport and to count to a specific value when in viewport.

Thanks

[Kevin-C]

@linusgrundstrom 

You might also be able to use a library like AOS to track scrolling and triggering of the animations.

[linusgrundstrom]

Hi again Kevin,

I actually kind solved the problem whith the following code, the only problem is that I can't get all my three divs to start (only one works)

$(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 {
    }
  });
});
});

I have three divs named "sectionone" "sectiontwo" "sectionthree" with the class "odometer" but with this code only one of them starts rolling. Do you know how I could fix this?

[Kevin-C]

Hey @linusgrundstrom Could you post a live example? Live code will get us moving a lot faster than hypothesizing.

[linusgrundstrom]

Hi again Kevin,

The coded I posted is the script I'm running.

I'm somehow now trying to get the script to include all of these 3 divs so I could set different values to them

<div id="sectionone" class="odometer"></div>

<div id="sectiontwo" class="odometer"></div>

<div id="sectionthree" class="odometer"></div>

As of now it is only the first div that executes by the script.

I made a test-page for the script as it stands now

https://www.getaccept.com/odometer-test (password: kevin123)

[Kevin-C · Accepted solution]

Ah I see, I assumed the implementation was a little different.

You could try something like this:

$(window).on('resize scroll', function() {
    if ($('.odometer').isInViewport()) { 
          $('#sectionone').html(240000);
      	  $('#sectiontwo').html(240000);
      	  $('#sectionthree').html(240000);
    }
  });

[linusgrundstrom]

Kevin, that worked like a charm!! So grateful for your help on this matter.

Do I have to add some kind of throttle so it doesnt load all the time?

Kind regards,

Linus

[Kevin-C]

Hey @linusgrundstrom 

So your script uses setTimeout() to delay the animations. Rather what you can do is detect if the element is in the view port, and if so update the number.

I would try something like this:

Create a method to check if the element is in the viewport.

$.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;
};

note: this probaly needs way to track if the animation have already happened/is happening to avoid undesirable behavior

Create an array to hold the ordered values.

IE .sectionOne - 789, .sectionTwo - 459, .sectionThree - 459.

var sectionVals = [789, 459, 459];

Listen to the window for scroll, and when scrolled loop over the sections:

var sectionVals = [789, 459, 459];

$(window).on('resize scroll', function() {
  $('.section').each(function() { // notice that here I used the "section" class to identify multiple sections with the odometer

    // more code to come

  });
});

Inside loop check if section is in viewport:

var sectionVals = [789, 459, 459];

$(window).on('resize scroll', function() {
  $('.section').each(function(index) {

    // the more code 

    // if "in view" 
    if ( $(this).isInViewport(); ) {
      // set the innerHTML using the index and sectionVals variable
      $(this).innerHTML = sectionVals[index];

    }

    // end more code 

  });
});

Hope this gets you going. If you need any more assistance feel free to reach out!

EDIT:

Sorry i didn't have time to test this code so you may have to rework it to implement.

[linusgrundstrom]

Hi @Kevin-C! Thank you very much for the input. Maybe I should have had put my own knowledgde in Javascript in the original post. I'm not at all good with code but I'm guessing I could find someone doing it for me on freelancer or something similar. Now I know a bit more on which level this problem is on.

Kind regards,

Linus

[Kevin-C]

@linusgrundstrom absolutely! And if you need a freelance dev for this, or anything else feel free to DM me!