xposedbones
xposedbones
PostsComments
KPCKevin Powell - Community
Created by chinto11 on 8/17/2023 in #front-end
counter up
I saw you added me in discord, feel free to ask any questions!
14 replies
KPCKevin Powell - Community
Created by chinto11 on 8/17/2023 in #front-end
counter up
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);
14 replies
KPCKevin Powell - Community
Created by chinto11 on 8/17/2023 in #front-end
counter up
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%)
14 replies
KPCKevin Powell - Community
Created by chinto11 on 8/17/2023 in #front-end
counter up
You’ll need to import gsap in your project
14 replies
KPCKevin Powell - Community
Created by ME on 8/17/2023 in #front-end
Event doesn't work
Not sure what you mean by creating an event. Can you provide a screenshot and/or describe your use-case and the desired outcome?
10 replies
KPCKevin Powell - Community
Created by chinto11 on 8/17/2023 in #front-end
counter up
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;
  }
});
14 replies