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 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

@ -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 */

Loading…
Cancel
Save

Powered by TurnKey Linux.