Number Counter Animation using Javascript

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

View Demo

<!doctype html>
<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.