A smooth-scrolling row of logos showing off partner brands, clients, or press mentions—you’ve seen them everywhere.
They’re simple, lightweight, and instantly add trust to a landing page.
Let’s look at what I’ve built for a scrolling-logos section in the new SanityPress template!
The Code#
Each logo container (including its padding or spacing) has a fixed container width (including surrounding padding). Since every logo slot is the same size, the total scroll distance is predictable, meaning you don’t need to duplicate any of the elements to make the scroll seamless.
Think of it as a conveyor belt where every box is the same size, looping perfectly back to the start without a hitch.
Note: To increase spacing between the logos, setpadding-inlineto the logos themselves rather thangapon the container element.
YouTube Tutorial#
Big thanks to Jhey Tompkins, whose YouTube tutorial breaks down a beautifully simple way to create a looping logo marquee using pure CSS. His explanation helped inspire this clean approach.
If you’re new to CSS animations or want to understand the math behind the timing, his video is absolutely worth a watch.
Wrapping up#
Scrolling logo sections are a small detail that make a big difference. They bring subtle motion, show credibility, and give the page a polished finish without relying on heavy libraries or frameworks.
Got your own favorite approach to smooth-scrolling logos? Found another cool implementation in the wild, like this one from Lando Norris' new sick website?
Share it in the comments—I’d love to geek out with you.
