Animation fix

gittogethers · Jan 29, 2025 · f5c3ba1 · f5c3ba1
1 parent 1b1a7d5
commit f5c3ba1
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 21 deletions.
diff --git a/scripts.js b/scripts.js
@@ -62,27 +62,21 @@ document.addEventListener('DOMContentLoaded', () => {
                 const row = document.createElement('div');
                 row.className = `mosaic-row mosaic-row-${i + 1}`;
 
-                // Add 3 images to each row
+                // Create a sequence of 6 images (3 original + 3 duplicates) for seamless loop
+                const rowImages = [];
                 for (let j = 0; j < 3; j++) {
                     const imgIndex = i * 3 + j;
                     const newImg = document.createElement('img');
                     newImg.src = loadedImages[imgIndex].src;
                     newImg.className = 'mosaic-image';
                     newImg.alt = '';
-
-                    // Add duplicate images for seamless animation
-                    row.appendChild(newImg.cloneNode(true));
+                    rowImages.push(newImg);
                 }
 
-                // Add another set of the same images for seamless looping
-                for (let j = 0; j < 3; j++) {
-                    const imgIndex = i * 3 + j;
-                    const newImg = document.createElement('img');
-                    newImg.src = loadedImages[imgIndex].src;
-                    newImg.className = 'mosaic-image';
-                    newImg.alt = '';
-                    row.appendChild(newImg);
-                }
+                // Add original images plus duplicates for seamless loop
+                [...rowImages, ...rowImages].forEach(img => {
+                    row.appendChild(img.cloneNode(true));
+                });
 
                 mosaicContainer.appendChild(row);
             }

diff --git a/styles.css b/styles.css
@@ -56,13 +56,13 @@
         transform: translateX(0);
     }
     100% {
-        transform: translateX(-50%);
+        transform: translateX(-100%);
     }
 }
 
 @keyframes slideLeft {
     0% {
-        transform: translateX(-50%);
+        transform: translateX(-100%);
     }
     100% {
         transform: translateX(0);
@@ -79,15 +79,11 @@
 }
 
 .mosaic-row-1, .mosaic-row-3 {
-    animation: slideRight 40s linear infinite;
-    /* Start with images visible */
-    transform: translateX(0);
+    animation: slideRight 60s linear infinite;
 }
 
 .mosaic-row-2 {
-    animation: slideLeft 40s linear infinite;
-    /* Start with images visible */
-    transform: translateX(-50%);
+    animation: slideLeft 60s linear infinite;
 }
 
 body {