fix

Author: rockynox

public/dist/.vite/manifest.json

@@ -33,7 +33,8 @@
     "src": "src/Assets/js/cardEvent.js",
     "isEntry": true,
     "imports": [
-      "src/Assets/js/cardUtilities.js"
+      "src/Assets/js/cardUtilities.js",
+      "_countUp.min.bkv6uBOp.min.js"
     ]
   },
   "src/Assets/js/cardStream.js": {
@@ -42,14 +43,18 @@
     "src": "src/Assets/js/cardStream.js",
     "isEntry": true,
     "imports": [
-      "src/Assets/js/cardUtilities.js"
+      "src/Assets/js/cardUtilities.js",
+      "_countUp.min.bkv6uBOp.min.js"
     ]
   },
   "src/Assets/js/cardUtilities.js": {
     "file": "cardUtilities.min.js",
     "name": "cardUtilities",
     "src": "src/Assets/js/cardUtilities.js",
-    "isEntry": true
+    "isEntry": true,
+    "imports": [
+      "_countUp.min.bkv6uBOp.min.js"
+    ]
   },
   "src/Assets/js/event.js": {
     "file": "event.min.js",

src/Assets/js/cardUtilities.js

@@ -1,17 +1,59 @@
+import { CountUp } from 'countup.js';
+
+const countUpOptions = {
+    separator: ' ',
+    decimal: ',',
+    suffix: ' €',
+    duration: 1.5,
+};
+
+let amountCountUp = null;
+let lastDonorCount = null;
+
+function initCountUp() {
+    if (!amountCountUp) {
+        const amountEl = document.getElementById('card-amount');
+        if (amountEl && typeof CountUp !== 'undefined') {
+            const startVal = window.currentAmount / 100;
+            amountCountUp = new CountUp('card-amount', startVal, countUpOptions);
+            if (!amountCountUp.error) {
+                amountCountUp.start();
+            }
+        }
+    }
+}
+
 function updateCardWidget() {
     const currentAmountUnit = window.currentAmount / 100;
     const goal = window.goalAmount || 1;
     const percentage = Math.min(100, Math.round((currentAmountUnit / goal) * 100));
 
-    const amountEl = document.getElementById('card-amount');
     const barFill = document.getElementById('card-bar-fill');
     const percentEl = document.getElementById('card-percentage');
     const donorsEl = document.getElementById('card-donors');
 
-    if (amountEl) amountEl.textContent = currentAmountUnit.toLocaleString('fr-FR') + ' €';
+    // Animate amount with CountUp
+    initCountUp();
+    if (amountCountUp) {
+        amountCountUp.update(currentAmountUnit);
+    } else {
+        const amountEl = document.getElementById('card-amount');
+        if (amountEl) amountEl.textContent = currentAmountUnit.toLocaleString('fr-FR') + ' €';
+    }
+
     if (barFill) barFill.style.width = percentage + '%';
     if (percentEl) percentEl.textContent = percentage + '%';
-    if (donorsEl) donorsEl.textContent = window.donorCount ?? 0;
+
+    // Animate donor count change
+    const newDonorCount = window.donorCount ?? 0;
+    if (donorsEl) {
+        if (lastDonorCount !== null && newDonorCount !== lastDonorCount) {
+            donorsEl.classList.add('card-widget__pulse');
+            setTimeout(() => donorsEl.classList.remove('card-widget__pulse'), 600);
+        }
+        donorsEl.textContent = newDonorCount;
+    }
+    lastDonorCount = newDonorCount;
 }
 
 export default updateCardWidget;

src/views/widget/card.html.twig

@@ -84,13 +84,6 @@
 		overflow: hidden;
 	}
 
-	.card-widget__bar-fill {
-		height: 100%;
-		border-radius: 999px;
-		transition: width 1s ease;
-		min-width: 2%;
-	}
-
 	.card-widget__goal {
 		font-size: 13px;
 		white-space: nowrap;
@@ -110,6 +103,23 @@
 	.card-widget__stats strong {
 		font-weight: 700;
 	}
+
+	.card-widget__bar-fill {
+		height: 100%;
+		border-radius: 999px;
+		transition: width 1.5s ease;
+		min-width: 2%;
+	}
+
+	@keyframes pulse {
+		0% { transform: scale(1); }
+		50% { transform: scale(1.2); }
+		100% { transform: scale(1); }
+	}
+
+	.card-widget__pulse {
+		animation: pulse 0.6s ease;
+	}
 </style>
 {% endblock %}
 {% block content %}