From c2ff09f857e228d1f393e16685e2e3291013a679 Mon Sep 17 00:00:00 2001
From: trancen <genspark_dev@genspark.ai>
Date: Tue, 3 Feb 2026 17:28:55 +0000
Subject: [PATCH] fix: Earthquake animation only for new quakes, not all
 markers

- Remove infinite pulse animation from all earthquake markers
- Animation now plays ONLY for newly detected earthquakes
- Animation class removed after 0.6s (after animation completes)
- Prevents markers from continuously moving/pulsing
- Fixes visual distraction issue

Changes:
- CSS: Removed infinite animation from .earthquake-marker class
- JS: Animation class added temporarily only for new quakes
- JS: setTimeout removes animation class after completion
---
 src/plugins/layers/useEarthquakes.js | 18 +++++++++++++++---
 src/styles/main.css                  | 13 ++-----------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/plugins/layers/useEarthquakes.js b/src/plugins/layers/useEarthquakes.js
index 7f1ebe0..1a19172 100644
--- a/src/plugins/layers/useEarthquakes.js
+++ b/src/plugins/layers/useEarthquakes.js
@@ -97,7 +97,7 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
       else if (mag < 7) color = '#cc0000'; // Dark red - major
       else color = '#990000'; // Very dark red - great
 
-      // Create circle marker with animation class if new
+      // Create circle marker - start with static class
       const circle = L.circleMarker([lat, lon], {
         radius: size / 2,
         fillColor: color,
@@ -105,11 +105,23 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
         weight: 2,
         opacity: opacity,
         fillOpacity: opacity * 0.7,
-        className: isNew ? 'earthquake-pulse-new' : 'earthquake-marker'
+        className: 'earthquake-marker'
       });
 
-      // Add pulsing animation for new earthquakes
+      // Add pulsing animation for new earthquakes ONLY
       if (isNew) {
+        // Add animation class temporarily
+        circle._path.classList.add('earthquake-pulse-new');
+        
+        // Remove animation class after it completes (0.6s)
+        setTimeout(() => {
+          try {
+            if (circle._path) {
+              circle._path.classList.remove('earthquake-pulse-new');
+            }
+          } catch (e) {}
+        }, 600);
+        
         // Create pulsing ring effect
         const pulseRing = L.circle([lat, lon], {
           radius: 50000, // 50km radius in meters
diff --git a/src/styles/main.css b/src/styles/main.css
index eb7dc3a..d5bf2c5 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -780,18 +780,9 @@ body::before {
   animation: earthquake-grow 0.6s ease-out;
 }
 
-/* Subtle pulse for regular earthquake markers */
-@keyframes earthquake-subtle-pulse {
-  0%, 100% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.1);
-  }
-}
-
+/* No animation for regular earthquake markers */
 .earthquake-marker {
-  animation: earthquake-subtle-pulse 2s ease-in-out infinite;
+  /* Static, no animation */
 }
 
 /* Lightning strike animations */