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.
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 (3)
Couple of years back I tried to create something same using JQuery... I created it for codepen challenge codepen.io/challenges/2018/septemb...
any way we could use this as a "profile view counter" for GitHub...?
Hey is there any way to animate the numbers on scroll?