counter up

please how can i add a counter up animation to my project?

8 Replies

A quick and easy way to do that would be to use gsap to animate the numbers. GSAP can animate any object so you could do something like this

const element = document.querySelector('.yourCounter');

const count = {
  value: 0
};

gsap.to(count, {
  duration: 1,
  ease: 'power4.out',
  onUpdate: () => {
    element.innerHTML = count.value;
  }
});

const element = document.querySelector('.yourCounter');

const count = {
  value: 0
};

gsap.to(count, {
  duration: 1,
  ease: 'power4.out',
  onUpdate: () => {
    element.innerHTML = count.value;
  }
});

chinto11OP•16mo ago

won't i also need a link for it in the head section?

xposedbones•16mo ago

You’ll need to import gsap in your project

Frida•16mo ago

const counter = document.getElementById('child');

let i = 0;
let count = 0;

while (i <= 10) {

    setInterval(() => {
        if (i <= 10) {
            counter.innerHTML = count += 1
            i++;
        }
    }, 300);
    break
}

// You can replace i length with any array or string length HTML:


 <h1 id="main-title">
    COUNTER
        <span id="child"></span>
  </h1>

Good old plain vanilla js, no library import needed 🙂 DON'T forget to break 😉 You can adjust the count speed with the number behind the ',' in the setIntervall functions .. Or, if you don't want to deal with the loop:

let count = 0;
let int = setInterval(counting, 300);

function counting() {
    count++;

    if (count > 15) {
        clearInterval(int)
    }

    counter.innerText = count
}


counting()

chinto11OP•16mo ago

thanks a lot Frida

xposedbones•16mo ago

You need to be careful with Frida's first answer, the setinterval is never cleared so it keeps running even when the count is done. I'm usually a no-useless-library kind of guy but if you have gsap already in your project I'd make use of it for this because it gives you a better control over the duration and easing of the count-up. If you use a setinterval to count up to 20k, it will take a really long to reach that amount.
If you want to not use a library, another way to do it would be to create a small lerp function and use a setinterval on that lerp(start, end, progress) where

start = value displayed on load (0)
end = value to count up to
progress = progress of the animation from 0 through 1 (0 = 0%, 1 = 100%)

start = value displayed on load (0)
end = value to count up to
progress = progress of the animation from 0 through 1 (0 = 0%, 1 = 100%)

function lerp(start, end, progress) {
  return start + (end - start) * progress;
}
const span = document.querySelector('span');

let progress = 0;
const interval = setInterval(() => {
  span.innerText = Math.round(lerp(0, 1000, progress));
  progress += 0.01;
  if (progress > 1) {
    clearInterval(interval);
  }
}, 50);

function lerp(start, end, progress) {
  return start + (end - start) * progress;
}
const span = document.querySelector('span');

let progress = 0;
const interval = setInterval(() => {
  span.innerText = Math.round(lerp(0, 1000, progress));
  progress += 0.01;
  if (progress > 1) {
    clearInterval(interval);
  }
}, 50);

chinto11OP•16mo ago

i really appreciate the time and effort you put into this, truth is i'm a newbie who just got into tech, alot of this is beyond me, thanks once again, i'll try to understand and get back to you.

xposedbones•16mo ago

I saw you added me in discord, feel free to ask any questions!

Gaming

Programming

counter up