diff --git a/client/src/containers/map/index.tsx b/client/src/containers/map/index.tsx
index c22b300..62a2072 100644
--- a/client/src/containers/map/index.tsx
+++ b/client/src/containers/map/index.tsx
@@ -147,8 +147,12 @@ export default function MapContainer() {
)}
>
-
- setMarkers([])} />
+ {!isStoriesPage && (
+ <>
+
+ setMarkers([])} />
+ >
+ )}
{isStoriesPage && }
diff --git a/client/src/containers/map/markers/globe-markers/index.tsx b/client/src/containers/map/markers/globe-markers/index.tsx
index 7e7da8d..0d226ca 100644
--- a/client/src/containers/map/markers/globe-markers/index.tsx
+++ b/client/src/containers/map/markers/globe-markers/index.tsx
@@ -61,11 +61,12 @@ const GlobeMarkers = () => {
// Animate the size and opacity of the markers
useEffect(() => {
+ if (typeof window === 'undefined') return;
const startTime = performance.now();
const velocity = 3000;
const minSize = 0.75;
- const interval = setInterval(() => {
+ const animate = () => {
const progress = ((performance.now() - startTime) % velocity) / velocity;
const x = Math.abs(Math.sin(progress * Math.PI));
// Set the opacity interpolating from 0 to 1 and back
@@ -73,12 +74,16 @@ const GlobeMarkers = () => {
const size = x * (1 - minSize) + minSize;
// Set the size interpolating from 0.75 to 1 and back
setSize(size);
- }, 100);
+ requestAnimationFrame(animate);
+ };
- return () => clearInterval(interval);
+ // https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame
+ const frame = requestAnimationFrame(animate);
+
+ return () => cancelAnimationFrame(frame);
}, []);
- return (
+ return pathname.includes('stories') ? null : (