33 lines
998 B
JavaScript
33 lines
998 B
JavaScript
function animate(element, end, duration = 500) {
|
|
console.log(element, end);
|
|
|
|
var element = document.getElementById(element);
|
|
const startTime = performance.now();
|
|
|
|
// Cubic easing function: slows down at the start and end
|
|
const easeInOutCubic = (t) =>
|
|
t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
|
|
|
|
const updateCount = (currentTime) => {
|
|
const elapsedTime = currentTime - startTime;
|
|
let progress = elapsedTime / duration;
|
|
|
|
// Clamp progress to ensure it doesn't overshoot
|
|
if (progress > 1) progress = 1;
|
|
|
|
// Apply easing curve to progress
|
|
const easedProgress = easeInOutCubic(progress);
|
|
|
|
// Calculate current value and round to integer
|
|
const currentCount = Math.round(end * easedProgress * 100) / 100;
|
|
|
|
element.innerHTML = currentCount;
|
|
|
|
if (progress < 1) {
|
|
requestAnimationFrame(updateCount);
|
|
}
|
|
};
|
|
|
|
requestAnimationFrame(updateCount);
|
|
}
|