---
title: "A Guide to Scrolling Logos"
description: "A guide to crafting a scrolling logos module. Read about three ways to build that familiar \"As seen on\" section found on many websites."
---
# A Guide to Scrolling Logos
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, set `padding-inline` to the logos themselves rather than `gap` on the container element.
```html
```
## YouTube Tutorial
Big thanks to **Jhey Tompkins** whose **[YouTube tutorial](https://www.youtube.com/watch?v=PyjEHQ3N14A)** 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.
```html
```
## 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](https://landonorris.com)**?
Share it in the comments—I’d love to geek out with you.
