Odometer

GitHub ★ s so far:

0

Odometer is a Javascript and CSS library for smoothly transitioning numbers. See the demo page for some examples.

Odometer's animations are handled entirely in CSS using transforms making them extremely performant, with automatic fallback on older browsers.

The library and largest theme is less than 3kb when minified and compressed.

All of the themes can be resized by setting the font-size of the .odometer element.

Usage

The simplest possible usage is just including the javascript and a theme css file on your page. Add the odometer class to any numbers you'd like to animate on change. You're done.

Just set the innerHTML, innerText, or use jQuery's .text() or .html() methods to change their contents, and the animation will happen automatically. Any libraries you're using to update their value, provided they don't update by erasing and rerendering the odometer element, will work just fine.

On older browsers, it will automatically fallback to a simpler animation which won't tax their fragile javascript runtime.

Example

Play with this simple example on jsFiddle.

Advanced

You can set options by creating a odometerOptions object:

window.odometerOptions = {
  auto: false, // Don't automatically initialize everything with class 'odometer'
  selector: '.my-numbers', // Change the selector used to automatically find things to be animated
  format: '(,ddd).dd', // Change how digit groups are formatted, and how many digits are shown after the decimal point
  duration: 3000, // Change how long the javascript expects the CSS animation to take
  theme: 'car', // Specify the theme (if you have more than one theme css file on the page)
  animation: 'count' // Count is a simpler animation method which just increments the value,
                     // use it when you're looking for something more subtle.
};

You can manually initialize an odometer with the global Odometer:

var el = document.querySelector('.some-element');

od = new Odometer({
  el: el,
  value: 333555,

  // Any option (other than auto and selector) can be passed in here
  format: '',
  theme: 'digital'
});

od.update(555)
// or
el.innerHTML = 555

Format

The format option allows you to configure how the digit groups are formatted, and how many digits are shown after the decimal point.

Format    -  Example
(,ddd)    -  12,345,678
(,ddd).dd -  12,345,678.09
(.ddd),dd -  12.345.678,09
( ddd),dd -  12 345 678,09
d         -  12345678

Browser Support

Odometer is intended to support IE8+, FF4+, Safari 6+, and Chrome.

Dependencies

None!

Contributing

Odometer is built using Grunt. To setup the build environment you first must have Node.js installed. Then:

# In the project directory
npm install

To build the project:

grunt

To have it watch for changes and build automatically:

grunt watch

We welcome pull requests!