add pulse animation to counters on number changes

HectorVilas · Apr 27, 2023 · 010a37b · 010a37b
1 parent 0f3e034
commit 010a37b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 0 deletions.
diff --git a/modules/functions.js b/modules/functions.js
@@ -12,6 +12,7 @@ export function addToCart() {
   thisCard.dataset.amount = newAmount;
   cartCount.textContent = parseInt(cartCount.textContent) + addSubstract;
 
+  cartCount.classList.add('counter-animate');
   if (cartCount.textContent === '0') {
     cart.classList.remove('has-content');
   } else {
@@ -33,6 +34,7 @@ export function toggleFavorite() {
 
   favCount.textContent = parseInt(favCount.textContent) + addSubstract;
 
+  favCount.classList.add('counter-animate');
   if (parseInt(favCount.textContent) === 0) {
     favIcon.classList.remove('has-content');
   } else {

diff --git a/modules/header.js b/modules/header.js
@@ -64,6 +64,12 @@ function nav() {
   user.classList.add('nav-icon', 'nav-user');
 
   menu.setAttribute('id', 'navigation');
+
+  [favoritesCount, cartCount].forEach((counter) => {
+    counter.addEventListener('animationend', () => {
+      counter.classList.remove('counter-animate');
+    });
+  });
 
   favorites.append(favoritesCount);
   cart.append(cartCount);

diff --git a/styles/header.css b/styles/header.css
@@ -133,3 +133,14 @@ header {
 .nav-favorites.has-content .nav-favorites-count {
   background-color: var(--color-4);
 }
+
+.counter-animate {
+  animation: counter-pulse 250ms linear;
+}
+
+@keyframes counter-pulse {
+  0%, 100% { scale: 100%; }
+  30% { scale: 110% }
+  0% { outline: 0px solid var(--color-2) }
+  100% { outline: 10px solid transparent }
+}