Odometer.js Animated Number Counter From Zero To Value - JavaScript Animation Part 2

The last time when I wrote Animated Number Counter From Zero To Value post around 2014, there was a substantial unexpected appreciation for this post as it was one of the first blog posts describing the methodology to animate numbers. However, It lacks a few formating and configurations for modern currency usage, number formatting in finance, and other sectors. So, this time I had to either add them as a feature or find some great library to do that. Fortunately, Hubspot (NYSE: HUBS) has open-sourced one of its implementation similar to an animated number counter from zero to value. I'm explaining the odometer.js library in this blog post with a small demo.

Install

In the traditional way, contrary to npm install nowadays just include script tag and CSS stylesheet import for theme support.

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

<script src="http://github.hubspot.com/odometer/odometer.js"></script>

Animated Number Counter from Zero to Value

As simple as JQuery API, this time find the reference in the DOM and set up a few configurations to start the animation rolling.

var odometerRef = document.querySelector(".odometer");

od = new Odometer({

  el: odometerRef,

  value: 0,   // initial value

  format: "(,ddd)",

  theme: "default"

});

This time we have theme and format support to customize the numbers displayed in the DOM. Feel free to play with the configuration and themes listed here. 

Finally, time to update the values:

setInterval(function () {

  qty = qty + 15000;

  odometer.innerHTML = qty++;

}, 3000);

to simulate the value updation, I have utilized setInterval from core javascript to run the function on a defined interval to update the odometer value. 

Demo:

See the Pen Odometer.js Animated Number Counter From Zero To Value - JavaScript Animation Part 2 - i-visionblog by s.shivasurya (@shivasurya) on CodePen.

Whenever there is a change in the value, the odometer observes the change and reflects with ease animation. Thus, we have more control now and with a lot of formating and theming options. Imagine building a Stock ticker with an odometer with fluctuation in prices, and a Gasoline meter which odometer.js comes in handy with a few API calls.

Kudos to the Hubspot team 💗and the fantastic CRM product they have built.

That's all for now, meet you soon in the next blog post. Bugs & Hugs, feel free to comment below. Share is care.