Smooth Looping for Logos in Marquee Sections


I have come across a design challenge for my website that is under construction. I have added two marquee sections using the below custom code, but I need the logos to not have the space on the left when it starts to load as it is currently seen on the website and the screenshot below.

The custom code I have used is:

.track-horizontal { position: absolute; white-space: nowrap; will-change: transform; animation: marquee-horizontal 10s linear infinite; /* manipulate the speed of the marquee by changing "40s" line above*/ } @keyframes marquee-horizontal { from { transform: translateX(-10%); } to { transform: translateX(-10%); } }

I need the logos to consistently loop smoothly without leaving any empty spaces.
Can anybody please help me solve this issue?

Thanks in advance!

Here is my site’s Read-Only link.


I’d recommend you this tutorial for an infinite marquee animation.
I’ve used it and it worked wonderfully.

@kenakkda Thank you so much! It helped :grinning:

1 Like