Add animating numbers on your site with Odometer

#webdev #javascript #html #tutorial

Are you looking to add some number animation on a project? I recently did and now take the time to share it with you. Let's see together how we can do this.

We will go through the steps of implementing Odometer scripts and styles in order to integrate numbers animation as smoothly as possible.

Prepare your code

We can download the files by going to Odometer website or Github.

There are no CDN but here are the CSS and Javascript sources.

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

Now we will want our html element to act as an odometer. Odometer requires us to add odometer id.

<p id="odometer"></p>

And last but not least, we need to make the animation happen. We need to change the number of your HTML element.

setTimeout(function(){
    odometer.innerHTML = 986;
}, 100);

We now have a basic, default styled odometer animation. What if we need to change the style?

Opt for our odometer style

We can select from a range of stylesheets created by Odomoter.

Please note that as of publication date (23 Sep 2020) the CSS on that Odometer page are not working. I hope it's fixed soon. In the meantime, adapt the CSS link I use in my example and Codepen.

We can also create our own odometer styling of course.