Number counter animation is used throughout the web to display numbers in a more interesting and eye-catching way. For example: Websites use number counter animations to display total number of shares and views of an article.
In this tutorial I will show you the easiest way to create such animation using JavaScript.
countUp.js Library
We will use countUp.js JavaScript library to create a number counter animation.
Here is a basic HTML template which loads the countUp.js library.
Here we are loading the library from Rawgit CDN.
Example
Here is a complete example showing how to use this library
<html>
<head>
<title>Counter Animation using JavaScript</title>
<script type="text/javascript" src="https://cdn.rawgit.com/inorganik/countUp.js/master/countUp.min.js"></script>
</head>
<body>
<h1><span id="number">249</span> shares</h1>
<script type="text/javascript">
var numAnim = new countUp(document.getElementById("number"), 0, 249);
numAnim.start();
</script>
</body>
</html>
We are creating a new instance of countUp class by passing the element to counter and its starting number and ending number. To start the animation we need to call the start() function of countUp object.
