wip

public/js/app/number-animator.js

@@ -0,0 +1,32 @@
+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);
+}