prevent hover animation on touch devices

dwightjack · Aug 26, 2024 · ef02514 · ef02514
1 parent c811cef
commit ef02514
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/src/components/Avatar.astro b/src/components/Avatar.astro
@@ -108,13 +108,15 @@ import marcoImg from '../assets/images/marco.jpg';
         iterations: Infinity,
       });
 
-      avatar.addEventListener('mouseenter', () => {
-        animation.updatePlaybackRate(14);
-      });
+      if (window.matchMedia('(hover: hover) and (pointer: fine)').matches) {
+        avatar.addEventListener('mouseenter', () => {
+          animation.updatePlaybackRate(14);
+        });
 
-      avatar.addEventListener('mouseleave', () => {
-        animation.updatePlaybackRate(1);
-      });
+        avatar.addEventListener('mouseleave', () => {
+          animation.updatePlaybackRate(1);
+        });
+      }
     }
   }
 </script>