AnimaCounters Demo

An easy way to animate your numbers

Installation

CDN

UNPKG
<script src="https://unpkg.com/anima-counters@1.1.1/dist/index.js"></script>
JSDELIVR
<script src="https://cdn.jsdelivr.net/npm/anima-counters@1.1.1/dist/index.js"></script>

NPM

npm install anima-counters
After installation you need to import the init function
const {initAnimaCounter} = require('anima-counters')

Examples

Basic usage

HTML

<div class="anima-counter"> 20000 </div>

JS

initAnimaCounter()
20000

Decimals & Datasets

HTML

<div class="anima-counter" data-anima-counter-duration="1000" data-anima-counter-start="-1000" data-anima-counter-style="fr-FR"> 0.040 </div>

JS

initAnimaCounter()
0.040

Count Down

HTML

<div class="anima-counter" data-anima-counter-start="100"> -0.020 </div>

JS

initAnimaCounter()
-0.020

Interval Per Number

Each number of the counter will be showed after aprox. 1000 milliseconds, numberDuration overrides duration option

HTML

<div class="anima-counter" data-anima-counter-number-duration="1000"> 100 </div>

JS

initAnimaCounter()
100

Different Styles

HTML

<div class="anima-counter" data-anima-counter-style="bn-BD"> 20000.00 </div>

JS

initAnimaCounter()
20000.00

HTML

<div class="anima-counter" data-anima-counter-style="es-MX"> 20000.00 </div>

JS

initAnimaCounter()
20000.00

HTML

<div class="anima-counter" data-anima-counter-style="fr-FR"> 20000.00 </div>

JS

initAnimaCounter()
20000.00

Delay

The counter will be executed 3 seconds after the number appers in the viewport

HTML

<div class="anima-counter" data-anima-counter-delay="3000"> 100 </div>

JS

initAnimaCounter()
100

Customize Trigger(Effect)

This is how you can create your own effects, in this example the counter plays and pauses if the mouse is over or out.

HTML

<div id="counter-hover"> 50 </div>

JS


//This line is only if you used NPM, not write this line if you used CDN
const {animaCounter} = require('anima-counters')

// The element
let elementCounter = document.getElementById('counter-hover')

//We pass the options we want. Effect option needs to be 'customize'.
let options = {
    duration: 500, 
    start: -50, 
    effect: 'customize'
}

// Create the object
let newAnimaCounter = new animaCounter(elementCounter, options)

// Add events
elementCounter.addEventListener('mouseover', () => newAnimaCounter.play())
elementCounter.addEventListener('mouseout', () => newAnimaCounter.pause())
50
Developed by Roberto Maciel