try another sync approach

index.html

@@ -12,7 +12,7 @@
             justify-content: center;
             align-items: center;
             height: 100vh;
-            background-color: black; /* Set a black background */
+            background-color: black;
         }
 
         .video-container {
@@ -33,7 +33,6 @@
 
         .second-video {
             clip-path: inset(0 50% 0 0);
-            /* Initially shows half of the second video */
         }
 
         .slider {
@@ -84,7 +83,7 @@
         }
 
         .slider.ready:hover::before,
-        .slider.ready::after {
+        .slider.ready:hover::after {
             opacity: 1;
         }
 
@@ -92,23 +91,18 @@
             0% {
                 left: 100%;
             }
-
             10% {
                 left: 80%;
             }
-
             20% {
                 left: 85%;
             }
-
             50% {
                 left: 20%;
             }
-
             70% {
                 left: 60%;
             }
-
             100% {
                 left: 30%;
             }
@@ -129,29 +123,23 @@
         const video2 = document.getElementById('video2');
 
         let isDragging = false;
+        const syncTolerance = 0.1; // Tolerance in seconds for syncing
 
-        // Sync the videos: Play, Pause, and Seek Events
-        function syncVideos(video) {
-            video1.currentTime = video.currentTime;
-            video2.currentTime = video.currentTime;
-
-            if (video.paused) {
-                video1.pause();
-                video2.pause();
-            } else {
-                video1.play();
-                video2.play();
+        // Function to sync the second video to the first video
+        function syncVideos(mainVideo, secondaryVideo) {
+            if (Math.abs(mainVideo.currentTime - secondaryVideo.currentTime) > syncTolerance) {
+                secondaryVideo.currentTime = mainVideo.currentTime;
+            }
+            if (mainVideo.paused && !secondaryVideo.paused) {
+                secondaryVideo.pause();
+            } else if (!mainVideo.paused && secondaryVideo.paused) {
+                secondaryVideo.play();
             }
         }
 
-        // Event listeners for video synchronization
-        video1.addEventListener('play', () => syncVideos(video1));
-        video1.addEventListener('pause', () => syncVideos(video1));
-        video1.addEventListener('seeked', () => syncVideos(video1));
-
-        video2.addEventListener('play', () => syncVideos(video2));
-        video2.addEventListener('pause', () => syncVideos(video2));
-        video2.addEventListener('seeked', () => syncVideos(video2));
+        // Set up timeupdate event listeners for smoother sync
+        video1.addEventListener('timeupdate', () => syncVideos(video1, video2));
+        video2.addEventListener('timeupdate', () => syncVideos(video2, video1));
 
         // Mouse events for slider
         slider.addEventListener('mousedown', () => isDragging = true);
@@ -168,7 +156,7 @@
 
         window.addEventListener('touchmove', (event) => {
             if (!isDragging) return;
-            handleSlide(event.touches[0].clientX); // Get the X position from the first touch point
+            handleSlide(event.touches[0].clientX);
         });
 
         function handleSlide(positionX) {
@@ -180,20 +168,20 @@
             slider.style.left = `${sliderPosition}px`;
 
             // Adjust second video visibility using clip-path
-            secondVideo.style.clipPath = `inset(0 ${rect.width - sliderPosition}px 0 0)`;
+            video2.style.clipPath = `inset(0 ${rect.width - sliderPosition}px 0 0)`;
         }
 
         // Function to update clip-path in real-time
         function updateClipPath() {
             const rect = container.getBoundingClientRect();
-            const sliderPosition = parseFloat(window.getComputedStyle(slider).left); // Get current slider position
+            const sliderPosition = parseFloat(window.getComputedStyle(slider).left);
             video2.style.clipPath = `inset(0 ${rect.width - sliderPosition}px 0 0)`;
-            requestAnimationFrame(updateClipPath); // Continuously call this function during animation
+            requestAnimationFrame(updateClipPath);
         }
 
         // Enable user control after the animation ends
         slider.addEventListener('animationend', () => {
-            slider.classList.add('ready'); // Add 'ready' class to show arrows
+            slider.classList.add('ready');
             slider.style.animation = 'none';
             slider.style.cursor = 'ew-resize';
             slider.style.pointerEvents = 'auto';