Odometer Code Script not working in Webflow

Hi Webflow fam,

I’m trying to implement the Odometer script from ViBrand Design

The code seems to work on its cloneable. But it doesn’t seem to work on my site

I’m trying to implement the odometer 5 script.

Can anyone have a quick look? (it’s in the before body tag)


Here is my site Read-Only: [LINK](Webflow - Flooz Landing Page)
(how to share your site Read-Only link)

Thanks Ali,

I don’t know that library at all, so I can’t give you any pointers other than “read the docs” and “dig through the code samples,” it’s what I would need to do.

Maybe I missed it but I also don’t see what elements you’re trying to affect; there’s a particular arrangement of elements in the cloneable that makes up the odo UI. Maybe I just didn’t see it, or possibly it’s on a different page.

As always, publish your site and look for errors in the console, they may help you find obvious scripting errors.

If you need me to help you with that work, I do have a micro-consulting arrangement, but I’m away for the next 3 weeks on a project.

Have a look here if that interests you;

At quick glance it looks like you haven’t bound this Odometer script to any of your CSS classes (listed under “style selector”).

It appears their example site does this with selectors such as “odometer_01” etc…

Try binding their JS code to one of your CSS selectors.

That’s my best guess without spending more time looking at your code.

Hi Michael! Thank you for looking into it!

Let me clarify a bit more,

I’m trying to affect this number in the hero section. But for some reason, it just skyrockets, as you see in the image
(Here’s the live site to see it)

This is the script I used is below,

<!-- The main script for all odometers -->
<script src="https://github.hubspot.com/odometer/odometer.js"></script>

<!-- ODOMETER 5 -->
<script>
// Run function for each element with the class .odometer._5
$('.odometer._5').each(function () {
  // Desired start value of the odometer
  var startValue = 15000;
  // Options for the odometer
  var odometer = new Odometer({
    // el tells the odometer script which element should be the odometer
    el: this,
    // value tells the odometer script what the start value should be
    value: startValue,
    // Change how digit groups are formatted, and how many digits 
    // are shown after the decimal point
    format: '(,ddd)',
    // Change how long the javascript expects the CSS animation to take
    duration: 2000,
  });
  // Init odometer with the defined start value
  odometer.render(startValue);

  // Set an interval that repeats everything in it every 3 seconds
  setInterval(function () {
    // We want to randomly generate a number in a range and add 
    // them to the current value
    // 1. Define your minimum value 
    const min = 1;
    // 2. Define your maximum value 
    const max = 60;
    // Safe a random number between your min and max values and round 
    // them to total numbers without decimals
    const randomNumber = Math.floor(Math.random() * (max - min)) + min;
    // Optional: Show generated numbers each interval in dev console
    // console.log(randomNumber);

    // Update the odometer and increase by generated number "randomNumber"
    odometer.update(startValue += randomNumber);
  }, 3000);
});
</script>

I got the class named odometer, with a combo class of 5. But still, it just doesn’t work

And yes, I do have errors. You would be able to see them on the live site

I would go for your consultation, but right now, I need the project to be done quickly.

Would you be able to have a quick look at the library and the console errors?

Because I feel like it’s programmed to work on the cloneable only and not any other site.

Hey Chris! Thanks for checking it out

I do have it bound up

I did share a little more details with @memetican above, you can check it out

I feel like it’s programmed to work with the cloneable, and not on any other website :confused:

Alright guys I fixed it!

Thank you @memetican and @ChrisDrit for chiming in!

I found the odometer script from JSDelivr

And just put them there in place of the previous script, like so,

<!-- The main script for all odometers -->
<script src="https://cdn.jsdelivr.net/npm/odometer.js@1.0.0/odometer.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/odometer.js@1.0.0/odometer.min.css">

And I also triggered it to just affect the class of .odometer (no combo class of 5)

And it works!