How to create a Javascript PURE animation that counts from zero to the Element contained in the HTML?

Question

I'm trying to create a script that counts from ZERO to a number that will be fed via PHP, for example my HTML is

<h1 class = "myClass"> 500 </h1>
<h1 class = "myClass"> 424 </h1>
<h1 class = "myClass"> 424 </h1>

I would like to retrieve the values of elements that contain a specific class and count from Zero to themselves.

But I would like it done in Javascript, I've seen some Jquery Plugins But I would like to do the same thing in javascript, just like this example: https://codepen.io/shivasurya/pen/FatiB

Detail, it would be interesting for the count to end at the same time for small values and larger values.

I already tried something like:

function ng_count_number_animation (element) {
    let select = window.document.querySelectorAll (element);
    let start = 0;

    let i;

    for (i = 0; i <select.length; i ++) {
        for (let y = 0; y <= Number (select [i] .innerHTML); y ++) {
            select [i] .innerHTML = y;
        }
    }
}

ng_count_number_animation (". ng_count_number");

But it never works, I also used the Javascript setinterval to interval the count but it also doesn't work, always the result is ZERO in all classes.

No, you can't select multiple elements and animate them all at once without having to call the function multiple times. — Klysmann Vieira, Sep 16 '19 at 02:54
_“it would be interesting for the count to end at the same time for small values and larger values”_ - if you want them to start and have them end at the same time, then you will of course have to either modify the interval or the increment step accordingly … — 04FS, Sep 16 '19 at 07:48

score 0 · Answer 1 · answered Sep 16 '19 at 00:20

You can achieve that using requestAnimationFrame(), to execute a function as often as possible. My code is not the most efficient, but I think it should be easy enough to understand :

//retrieve all counters from body
let counters = document.getElementsByClassName('myClass');

//retrieve all counter value
let vals = Array.from(counters).map(x => Number(x.innerHTML));

//convert counters element collection to an array
counters = Array.from(counters);

//loop through all counters
counters.forEach(el => {
  //set counter to 0
  el.innerHTML = '0';
  //set 'internal' counter to 0 -> obviously this isn't super efficient
  //could be faster if you used an array instead
  el.counter = 0;
});

//execute this function as often as possible using requestAnimationFrame()
let update = () => {
  //loop through all counters
  counters.forEach((el, i) => {
    //add one to 'internal counter'
    el.counter += 1;
    //update counter display value min(max, currentVal + 1)
    el.innerHTML = Math.min(vals[i], el.counter);
  });
  requestAnimationFrame(update);
}
update();

<h1 class = "myClass"> 500 </h1>
<h1 class = "myClass"> 424 </h1>
<h1 class = "myClass"> 424 </h1>

But is there a way for the count to stop at the same time regardless of the number of digits ??? for example: 100, 1000, 100000, does the animation stop at the same time? — Klysmann Vieira, Sep 16 '19 at 02:36
you could do that by either using a different increment value, or a a different speed — John Krakov, Sep 16 '19 at 10:49

How to create a Javascript PURE animation that counts from zero to the Element contained in the HTML?

1 Answers1