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
pull/82/head
trancen 2 days ago
parent 003953054a
commit c2ff09f857

@ -97,7 +97,7 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
else if (mag < 7) color = '#cc0000'; // Dark red - major else if (mag < 7) color = '#cc0000'; // Dark red - major
else color = '#990000'; // Very dark red - great 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], { const circle = L.circleMarker([lat, lon], {
radius: size / 2, radius: size / 2,
fillColor: color, fillColor: color,
@ -105,11 +105,23 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
weight: 2, weight: 2,
opacity: opacity, opacity: opacity,
fillOpacity: opacity * 0.7, 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) { 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 // Create pulsing ring effect
const pulseRing = L.circle([lat, lon], { const pulseRing = L.circle([lat, lon], {
radius: 50000, // 50km radius in meters radius: 50000, // 50km radius in meters

@ -780,18 +780,9 @@ body::before {
animation: earthquake-grow 0.6s ease-out; animation: earthquake-grow 0.6s ease-out;
} }
/* Subtle pulse for regular earthquake markers */ /* No animation for regular earthquake markers */
@keyframes earthquake-subtle-pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.earthquake-marker { .earthquake-marker {
animation: earthquake-subtle-pulse 2s ease-in-out infinite; /* Static, no animation */
} }
/* Lightning strike animations */ /* Lightning strike animations */

Loading…
Cancel
Save

Powered by TurnKey Linux.