countupthis

CountUpThis.js is the easiest and the most lightweight JavaScript class you can use to easily make the numbers counted up with animations, it is dependency-free.

Usage no npm install needed!

<script type="module">
  import countupthis from 'https://cdn.skypack.dev/countupthis';
</script>

README

CountUpThis.js

CountUpThis.js is the easiest and the most lightweight JavaScript class you can use to easily make the numbers counted up with animations, it is dependency-free.

the animation works only for visible elements in the viewport, the rest of elements animates when the document scrolls to them.

CountUpThis.js supports all browsers.

Try the demo

Installation

Simply include the CountUpThis.js file in your project or install via npm/yarn using the package name CountThisUp.js.

Usage:

HTML

<span class="countupthis">543</span>
<span class="countupthis">400,999.25</span>
<span class="countupthis">$29.99</span>
<div class="countupthis">The world population is 7,600,0000 people as of 2018.</div>

JavaScript

new CountUpThis();

Params:

  • selector = (optional) the dom selector you can use for using CountThisUp.js, default is '.countthisup'
  • duration = (optional) duration in micro seconds, default 3000
  • delay = (optional) duration between each change, default 10
  • easing = (optional) default 10, you can set it false
  • numerals = (optional) 'en' { you can use 'en' or 'ar' or 'fa' }

you can send any param as an element in object during inoking the class

new CountUpThis({
  selector: '#visitorcounter',
  numerals: 'ar',
  delay: 10000
});