ms000

Certainly - https://www.findsolace.ca/

Hi, I need help making this scroll effect infinite and smooth - right now it's not quite lining up with the animation resetting. Ideally I'd love to have the animation restart as the old one ends, creating the loop effect. Any help here is appreciated! Here is the code for reference: <div class="scrolling-logos"> <div class="logo-strip"> <!-- First set of logos --> <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/373f31f3-9272-4255-be8f-d66f24f0cc69/cashco-logo-colour.png" alt="Cashco Logo"> <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/9f68db32-8cf2-4ece-8cb2-c6452d958d6f/convrg-logo.png" alt="Convrg Logo"> <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/3eb4ccb5-064b-40fe-aea6-764c0833b61d/uofa-if-logo-green.png" alt="University of Alberta IF Logo"> <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/b408456d-b92a-47c3-8791-ae0d90b48c7f/inter-rail-logo.png" alt="Inter-Rail Logo"> <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/df2b7e07-a795-44ed-a68c-a4f526a9fe79/kcpa-colour-logo.png" alt="KCPA Logo"> <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/ff092094-cb57-4682-b912-0de20c8d7b87/DriftGolfLogoColor+1.png" alt="Drift Golf Logo"> <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/fb2ccf9e-ba44-4c1b-be55-335c88044c86/Akash-homes_logo.png" alt="Akash Homes Logo"> <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/c5cb7b1a-5065-470e-a8d7-cf5729917ec0/Agri-Gate+Logo.png" alt="Agri-Gate Logo"> <!-- Repeat the same set of logos for a seamless transition --> <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/373f31f3-9272-4255-be8f-d66f24f0cc69/cashco-logo-colour.png" alt="Cashco Logo"> <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/9f68db32-8cf2-4ece-8cb2-c6452d958d6f/convrg-logo.png" alt="Convrg Logo"> <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/3eb4ccb5-064b-40fe-aea6-764c0833b61d/uofa-if-logo-green.png" alt="University of Alberta IF Logo"> <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/b408456d-b92a-47c3-8791-ae0d90b48c7f/inter-rail-logo.png" alt="Inter-Rail Logo"> <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/df2b7e07-a795-44ed-a68c-a4f526a9fe79/kcpa-colour-logo.png" alt="KCPA Logo"> <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/ff092094-cb57-4682-b912-0de20c8d7b87/DriftGolfLogoColor+1.png" alt="Drift Golf Logo"> <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/fb2ccf9e-ba44-4c1b-be55-335c88044c86/Akash-homes_logo.png" alt="Akash Homes Logo"> <img src="https://images.squarespace-cdn.com/content/654509262f9f1d72b50ce35c/c5cb7b1a-5065-470e-a8d7-cf5729917ec0/Agri-Gate+Logo.png" alt="Agri-Gate Logo"> </div> </div> <style> /* Existing CSS for desktop and common styles */ .scrolling-logos { position: relative; overflow: hidden; white-space: nowrap; line-height: 0; /* Remove space between inline-block elements */ } .logo-strip { display: flex; align-items: center; animation: scroll-logos 15s linear infinite; } .logo-strip img { min-width: 200px; /* Minimum width for all logos */ height: auto; margin-right: 30px; } /* Keyframes for desktop */ @keyframes scroll-logos { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); /* Assuming the logos are duplicated */ } } /* Media query for mobile devices */ @media screen and (max-width: 600px) { .logo-strip img { min-width: 150px; /* Smaller size on mobile */ margin-right: 15px; /* Less space between logos on mobile */ } .logo-strip { animation: scroll-logos-mobile 15s linear infinite; } /* Keyframes for mobile */ @keyframes scroll-logos-mobile { 0% { transform: translateX(0); } 100% { transform: translateX(-2640px); } /* Double the total width of one set of logos */ } } /* Additional styles */ .scrolling-logos::before, .scrolling-logos::after { content: ''; position: absolute; top: 0; bottom: 0; width: 100px; /* Width of the fade effect */ z-index: 2; pointer-events: none; } .scrolling-logos::before { left: 0; background: linear-gradient(to right, white, transparent); } .scrolling-logos::after { right: 0; background: linear-gradient(to left, white, transparent); } .logo-strip.active { /* Class to stop animation when dragging */ animation-play-state: paused; } .logo-strip:hover { animation-play-state: paused; /* Optional: Pause animation on hover */ } </style>