Both ScrollerJS and Odometer are two JavaScript libraries to transition one number to another number with animation. They provide user a fancy animation about scrolling numbers. These libraries can be used in many scenarios such as user statistic counter, timer or odometer.
This post is going to have a comparison on these two open source libraries. Below is a table which lists the features the two libraries have:
| Feature | ScrollerJS | Odometer |
| Language | JavaScript and CSS | JavaScript and CSS |
| Size | Around 10KB(Minified) | Less than 3KB(Minified) |
| Logic | Support both CSS transition and traditional DOM position(top) to handle animations. | Use CSS transitions to handle animation with fallback capability in old browser |
| Flexibility | It provides many options such the user can customize the module. For example, separatorType, interval, direction, mode etc. It is more flexible than Odometer | It has a limited set of options. For example format, animation etc |
| Browser support | Chrome 42.0, Firefox 37.0.2, IE, Safari 5.1.7, Opera 29.0 and above. | IE8+, FF4+, Safari 6+, and Chrome. |
| Other | It supports displaying time as well |
The two actually provide almost the same functionalities. Odometer is smaller in size which means less load time. This is very important in web apps. Also it providers a series of themes to be chosen from.
ScrollerJS provides more features and flexibilities. Users can customize their modules with more options provided.
The setup of both libraries are simple. Just include the respective js in the HTML page and then start to create instance.
For ScrollerJS, to create an instance, just need to:
var scroller=Scroller.getNewInstance({
direction:Scroller.DIRECTION.DOWN,
interval:3000,
width:200,
amount:50,
seperatorType:Scroller.SEPERATOR.THOUSAND,
seperator:"-"
});
scroller.appendTo(document.getElementById("scroller-pane"))
.setStyle({backgroundColor:"green",color:"red"});
scroller.start(1000);
scroller.scrollTo(18);
There are a set of options can be set here. Including the scrolling direction, how long the scroll will last, and how much to scroll etc. For the full list, you can visit the GitHub page for it.
For Odometer, the code will look like:
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
It also has its own set of options including format, theme and animation etc. For the full list, see their official site.
Our suggestion is that if you want to save bandwidth, you can choose Odometer. However, if you want more control, you should choose ScrollerJS.
