Keep globe rotating until scroll

Vizzuality · Jul 17, 2024 · ca8cf93 · ca8cf93
1 parent f6e95ae
commit ca8cf93
Showing 1 changed file with 13 additions and 5 deletions.
diff --git a/src/components/globe-video/index.tsx b/src/components/globe-video/index.tsx
@@ -6,13 +6,21 @@ export default function GlobeVideo() {
   const videoRef = useRef<HTMLVideoElement>(null);
   const { scrollYProgress } = useScroll();
   const [interactionVisible, setInteractionVisible] = useState(false);
-  useEffect(() => {
-    if (!videoRef?.current) return;
-    videoRef.current.pause();
-  }, [videoRef]);
 
   useMotionValueEvent(scrollYProgress, "change", (latest) => {
-    if (videoRef?.current?.readyState) {
+    if (latest < 0.1) {
+      if (videoRef?.current?.readyState) {
+
+        if (videoRef.current.paused) {
+          videoRef.current.play();
+        }
+      }
+    }
+
+    if (videoRef?.current?.readyState && latest > 0.1) {
+      if (!videoRef.current.paused) {
+        videoRef.current.pause();
+      }
       videoRef.current.currentTime = videoRef.current.duration * latest;
     }
     if (!interactionVisible && latest > 0.99) {