Animated Number Counter In Vanilla JS – number-rollup

Category: Animation , Javascript | October 15, 2020
Author:marknorrapscm
Views Total:4,372 views
Official Page:Go to website
Last Update:October 15, 2020
License:MIT

Preview:

Animated Number Counter In Vanilla JS – number-rollup

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();

You Might Be Interested In:


Leave a Reply