DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Add animating numbers on your site with Odometer
RΓ©my Beumier
RΓ©my Beumier

Posted on • Updated on

Add animating numbers on your site with Odometer

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>
Enter fullscreen mode Exit fullscreen mode

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

<p id="odometer"></p>
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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.

Live example on Codepen

Isn't an example worth a million words? πŸ˜„

It's a really light and straightforward integration.
Huge thank to HubSpot!

Keep playing to learn! πŸ”₯

If you find value in what I offer don't hesitate and buy me a coffee πŸ˜‡

Top comments (4)

Collapse
shhdharmen profile image
Dharmen Shah

Couple of years back I tried to create something same using JQuery... I created it for codepen challenge codepen.io/challenges/2018/septemb...

Collapse
saberglow profile image
Wali Ullah

any way we could use this as a "profile view counter" for GitHub...?

Collapse
tanish2000 profile image
Tanish2000

Hey is there any way to animate the numbers on scroll?

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.