Animated Number Counter In Vanilla JS – number-rollup

Preview:

Description:

number-rollup is an ES6 library to create an attractive number counter with animated counting on the webpage.

It uses requestAnimationFrame() API to increment or decrement a number smoothly in a period of time. Created with performance in mind.

How to use it:

1. Install & download the library with NPM.

# NPM
$ npm i number-rollup --save
2. Import the number-rollup as an ES module.

import numberRollup from "number-rollup";

3. Create a container to hold the number counter.

<div id="example"></div>

4. Initialize the number counter and determine the start/end numbers.

numberRollup({
  id: "example",
  startNumber: 0,
  endNumber: 100
});

5. Determine the duration of the count animation.

numberRollup({
  id: "example",
  startNumber: 0,
  endNumber: 100,
  duration: 500
});

6. You’re also allowed to pass the options via HTML data attribute if have multiple counter instances on the page.

<div class="number-rollup"
     data-number-rollup-start="0"
     data-number-rollup-end="100"
     data-number-rollup-duration="500"
</div>

numberRollup();