Components
How to Add an Animated Logo Carousel to Your Framer Site
Add a logo carousel in Framer with the native Ticker, or use a swap-in-place row when a scrolling strip is too busy. Includes design tips for balanced logos.
To add an animated logo carousel in Framer, use the built-in Ticker for a continuous scrolling row, or a swap-in-place component when you want logos to change without moving across the screen. Ticker needs no code and suits most sites. For a calmer, fixed row, I built the free Logo Blur Carousel.
I’m Sanna Granqvist, a web designer in Sweden, listed as a Framer Pro Studio. I’ve worked in Framer since 2023 and published 24 components on the Framer Marketplace. Logo rows come up on almost every client site I build, and the choice between the two approaches is mostly about how much motion the section can take.
What is the easiest way to add a logo carousel in Framer?
The easiest way is Framer’s built-in Ticker. Insert a Ticker, place your logo images inside it, and it scrolls them in a continuous loop. You set direction, speed and gap in the properties panel. It’s native, needs no code, and works well for a simple row of client or partner logos.
How do you set up a logo row with Framer’s Ticker?
Ticker is my default, because it follows the rule I use on every project: native first, code component second, override last. I’ve written more about that order in when to use native Framer, a code component or an override.
Insert a Ticker from Framer’s insert menu and place it inside your logo section.
Add your logos as image layers inside the Ticker. SVGs keep edges sharp at any size.
Give every logo the same height and let the width follow the aspect ratio.
Set the gap, direction and speed in the properties panel.
Set the Ticker to fill the width of its container so it runs edge to edge.
Preview on each breakpoint and adjust the gap for smaller screens.
Depending on your version of Framer, Ticker may also offer options such as slowing on hover or fading the edges. Check the properties panel for what’s available to you. A soft fade at the edges helps the row look intentional instead of cropped.
When does a swap-in-place logo carousel fit better?
A scrolling ticker suits a lively page, but it keeps moving across the whole width, all the time. On a quiet, editorial layout that can pull attention away from the headline. It also shows each logo only while it passes by.
A swap-in-place carousel keeps a fixed set of slots and changes the logo in each slot. The row stays still as a shape, and only the logos change. I reach for this when:
The design is calm and a moving strip would feel busy.
You have more logos than fit in one row, but don’t want a long scroll.
The logo row sits close to a headline or call to action.
You want logos aligned to the same grid as the rest of the page.
How does the Logo Blur Carousel work?
Framer doesn’t have a native swap-in-place logo row, so I built one as a code component: the canvas can’t rotate a larger pool of images through fixed slots on its own. The Logo Blur Carousel is free. Fixed slots rotate through a larger pool of logos with a blur and roll-up transition, staggered from left to right.
What it includes:
Up to 60 logos, with optional links per logo.
A blur and roll-up swap, with a choice of stagger direction.
Separate logo counts for desktop and mobile.
A monochrome mode, with color on hover.
Pausing on hover, when offscreen, or when the tab is hidden.
Lazy-loaded images and reduced-motion support.
Pausing when the row is offscreen or the tab is hidden means it isn’t animating when nobody can see it. You can browse the rest of my components on the components page.
How do you design a logo carousel that looks balanced?
Most logo rows look off because the logos differ in shape and visual weight, not because of the animation. These are the things I check on every project.
Keep logo height consistent
Set one height for every logo and let widths vary. Then adjust by eye: a wide wordmark often needs to sit a little smaller than a square mark to look the same size. Trim empty space from the files first so the bounding boxes are honest.
Use monochrome logos
A row of logos in their full brand colors competes with your own brand. Use one color, usually a mid-grey or your text color at reduced opacity, and the row reads as a single unit. Check the contrast against your background so the logos stay legible.
Give the logos room
Generous, even spacing makes a row look confident. If logos are crowding each other, reduce the number shown rather than shrinking them.
Respect reduced motion
Some visitors set their system to reduce motion. Continuous movement can be uncomfortable for them, so make sure the row stops or becomes static when that setting is on. The Logo Blur Carousel supports reduced motion. For a Ticker, check how your version handles it before you launch.
Don’t show too many logos
A handful of recognisable names does more than a long list nobody reads. If you have many, choose the ones your target clients will know, and let the rest rotate in the background or leave them out.
Plan for mobile
On a phone, a row designed for desktop gets cramped fast. Show fewer logos on small screens, keep the height readable, and reduce the gap in proportion. The Logo Blur Carousel has separate desktop and mobile counts for this reason.
FAQ
Does Framer have a built-in logo carousel?
Framer has a built-in Ticker that scrolls any content in a loop, which works as a logo carousel. There isn’t a native swap-in-place logo row, which is why I built the Logo Blur Carousel.
Do I need code to add a logo carousel in Framer?
No. The Ticker is native and needs no code. The Logo Blur Carousel is a code component, but you add it and set it up through its properties like any other component.
Should logos in a carousel be links?
Usually not. A logo row is there to build trust, and links send visitors away from your page. Add links only when each logo leads to a relevant case study.
How many logos should a logo carousel have?
Show as many as fit comfortably in one row at your chosen height and spacing. If you have more, rotate them through fixed slots rather than making the row longer.
Is the Logo Blur Carousel free?
Yes. The Logo Blur Carousel is free on the Framer Marketplace.
For most sites, start with Ticker and spend your time on logo height, color and spacing. When a moving strip is too much for the page, a swap-in-place row gives you the same trust signal with less motion.