Hi there,
Trying to set up an infinite scrolling loop of brand images for our company's website. I've been able to do this successfully Squarespace with the code below. However when trying to implement into Squarespace the next set of images begins looping straight away from the right of screen, rather than the first (left) set reaching -100% to start looping seamlessly.
Thanks,
Harry
<div class="logos-scrolling">
<div class="logos-scrolling-slide">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/fc80033a-4380-464a-9e91-f3a2829448d0/Logo-Deloitte.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/e101634b-97a7-4eb2-ba30-8884a4df196d/Logo-PwC.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/f04be7fe-554c-4e1c-9fa6-35db897c9d61/Logo-Nine.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/d35d7b3b-93e9-4a7a-9beb-68d793913c8e/Logo-DSO.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/7966461a-456b-4088-90f9-cb27e6538363/Logo-Realtime+Learning.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/9f1f4356-db53-4e03-8c11-6f3604c08dba/Logo-Vict4W.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/efa8c3c3-c93c-4c56-b7a0-21fd781b0370/Logo-Student+Edge.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/7fa54062-de1f-4ac3-9599-6e1ac829e169/Logo-VicWise.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/06db27e2-16d5-46d5-9f86-531de5bc062c/Logo-EWIT.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/9bb67d6d-b153-4068-acfb-5bff38f6747a/Logo-ISIC.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/e8fe0525-eae9-4fc4-9ecc-b1d1a6e0aa70/Logo-Coal+Services.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/ace7cfa2-3d8e-4512-bc60-2626e8807745/Logo-Detector+Inspector.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/521cde05-69f1-46bf-bf2a-a03ece176283/Logo-Trinity.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/559fa3ee-1f8d-4b58-8c06-b8276d62af92/Logo-Korowa.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/c0cb3691-f2ab-478d-a26d-ea2aaa2758e7/Logo-ACU.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/679838be-35be-42f6-86c6-9d5e015c84e5/Logo-Mentone+Girls+Grammar.png">
</div>
<div class="logos-scrolling-slide">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/fc80033a-4380-464a-9e91-f3a2829448d0/Logo-Deloitte.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/e101634b-97a7-4eb2-ba30-8884a4df196d/Logo-PwC.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/f04be7fe-554c-4e1c-9fa6-35db897c9d61/Logo-Nine.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/d35d7b3b-93e9-4a7a-9beb-68d793913c8e/Logo-DSO.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/7966461a-456b-4088-90f9-cb27e6538363/Logo-Realtime+Learning.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/9f1f4356-db53-4e03-8c11-6f3604c08dba/Logo-Vict4W.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/efa8c3c3-c93c-4c56-b7a0-21fd781b0370/Logo-Student+Edge.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/7fa54062-de1f-4ac3-9599-6e1ac829e169/Logo-VicWise.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/06db27e2-16d5-46d5-9f86-531de5bc062c/Logo-EWIT.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/9bb67d6d-b153-4068-acfb-5bff38f6747a/Logo-ISIC.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/e8fe0525-eae9-4fc4-9ecc-b1d1a6e0aa70/Logo-Coal+Services.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/ace7cfa2-3d8e-4512-bc60-2626e8807745/Logo-Detector+Inspector.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/521cde05-69f1-46bf-bf2a-a03ece176283/Logo-Trinity.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/559fa3ee-1f8d-4b58-8c06-b8276d62af92/Logo-Korowa.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/c0cb3691-f2ab-478d-a26d-ea2aaa2758e7/Logo-ACU.png">
<img src="https://images.squarespace-cdn.com/content/6285c61381c4ed5a07f2c7c3/679838be-35be-42f6-86c6-9d5e015c84e5/Logo-Mentone+Girls+Grammar.png">
</div>
</div>
<style>
@keyframes slide {
from{transform: translateX(0);}
to{transform: translateX(-100%);}
}
.logos-scrolling {overflow:hidden;white-space: nowrap;}
.logos-scrolling-slide {display:inline-block;animation: 20s slide infinite linear;}
.logos-scrolling-slide img {height:260px;}
</style>
May-18-2023 15-53-59-720p.mov
