A Framer marquee is a horizontal strip of content, such as logos, text, or images, that scrolls continuously across the screen on a loop. In Framer you build one with the built-in Ticker component: drop a Ticker onto the canvas, place your items inside it, set the direction and speed, and Framer animates the row in a seamless, repeating loop with no code.
Marquees and tickers solve a specific design problem. You have more items than fit comfortably in a row, such as a wall of client logos or a list of features, and you want to show them all without forcing a static grid. A slow, continuous scroll displays everything while adding a touch of motion that signals the site is alive.
This guide covers the Ticker component in detail, the exact steps to build a logo marquee, speed and direction settings, how to keep the loop seamless, performance considerations, and the design patterns where a ticker genuinely helps rather than distracts.
Key takeaways
- Framer’s built-in Ticker component creates seamless, looping marquees for logos, text, or any layer, with no custom code.
- You control direction, speed, gap between items, and hover behavior directly in the Ticker’s properties panel.
- A seamless loop depends on the Ticker duplicating your content automatically, so you add each item only once.
- Common uses include logo walls, testimonial strips, announcement bars, and feature lists that have too many items for a static row.
- Keep speeds slow and readable, pause on hover for interactive content, and respect reduced-motion preferences for accessibility.
The Framer Ticker component
Framer ships with a native Ticker component built specifically for this kind of looping motion. Unlike a manual animation, the Ticker handles the hardest part of a marquee for you: making the loop seamless. It measures your content, duplicates it as needed, and animates the row so that when the last item scrolls off one edge, the first item is already entering the other, with no visible jump or reset.
Because the Ticker is a real component, you can put almost anything inside it. The most common contents are an image set of client or partner logos, a row of text phrases, or a set of cards. Whatever you place in the Ticker scrolls as a unit, and the component takes care of repeating it.
Ticker versus manual scroll animation
You could build a marquee by hand with a position animation, but you would have to manually duplicate content and time the loop so the reset is invisible, which is fiddly and breaks whenever content changes. The Ticker component removes all of that. Reach for a manual animation only when you need motion the Ticker cannot express, such as a non-linear path. For straight horizontal or vertical looping, the Ticker is the right tool.
Building a logo marquee: step by step
Here is the standard workflow for a continuously scrolling wall of client logos.
- On the canvas, open the insert menu and add a Ticker component where you want the marquee to sit.
- Set the Ticker’s width to fill its container and give it a fixed height that matches your logo size.
- Place each logo image inside the Ticker as a child layer, sized consistently, for example all 40 pixels tall.
- In the Ticker properties, set the gap between items so the logos have even breathing room.
- Choose a direction, typically left for a logo wall, and set a slow speed so visitors can read each logo as it passes.
- Enable pause on hover if you want the scroll to stop when a visitor hovers, which is useful for clickable logos.
- Preview the page. The logos now scroll in a seamless, continuous loop.
You add each logo only once. The Ticker automatically duplicates the set behind the scenes to fill the width and keep the loop seamless, so you never paste your logos twice. To soften the edges where logos enter and exit, add a subtle gradient fade or mask on the left and right of the Ticker container so items appear to dissolve in and out rather than popping at a hard edge.
Speed, direction, and gap settings
The Ticker’s three core controls determine how the marquee feels. The table below summarizes each.
| Setting | What it controls | Recommendation |
|---|---|---|
| Direction | Which way the content scrolls | Left for logos and text, can be vertical for testimonials |
| Speed | How fast the row moves | Slow enough to read each item, often 40 to 80 pixels per second |
| Gap | Spacing between items | Even, generous spacing so items do not crowd |
| Pause on hover | Stops the scroll on hover | On for clickable items, off for decorative strips |
Speed is the setting people get wrong most often. A marquee that moves too fast is unreadable and feels frantic, which defeats the purpose of showing the content. When in doubt, slow it down until you can comfortably read each item as it passes. For decorative text strips where reading individual words matters less, a slightly faster pace is acceptable.
Keeping the loop seamless
The whole appeal of a ticker is the invisible loop. A few details keep it that way.
Let the Ticker handle duplication
The most common mistake is manually pasting your content twice to fill the row. The Ticker already duplicates content internally, so doubling it yourself creates an uneven loop or a visible gap. Add each item once and trust the component.
Match your content width to the container
If your set of items is much narrower than the container, the loop can feel sparse with large empty stretches. Add enough items, or reduce the gap, so the row stays visually full as it scrolls. The Ticker fills any remaining width with duplicates, but starting with a healthy number of items keeps the rhythm even.
Performance and accessibility
A ticker animates continuously, which means it never stops working while the section is on screen. This is generally fine because the Ticker animates with transforms, which are GPU-accelerated, but a few rules keep it light.
Performance rules
- Optimize logo and image assets before adding them, since a row of heavy images animating forever is the main performance risk.
- Avoid putting dozens of complex card components in a single Ticker, which multiplies the rendering cost.
- Use SVG logos where possible, since they scale crisply and stay lightweight.
Respecting reduced motion
Continuous motion can be uncomfortable for visitors who are sensitive to it. Many of these visitors enable a reduced-motion preference in their operating system. For accessibility, consider providing a static fallback, such as a non-scrolling grid of the same logos, so the content is fully available without the animation. At minimum, keep the scroll slow and steady, which is far gentler than a fast or jittery loop.
Design patterns where a ticker works
A ticker earns its place when it solves a real layout problem. These patterns consistently work well.
The logo wall
The classic use. A slow strip of client, partner, or press logos provides social proof while fitting many marks into a compact space. Pause on hover so visitors can click through to a logo if it links somewhere.
The feature or keyword strip
A row of short phrases or keywords scrolling under a hero adds energy and reinforces what the business does, without taking up a full section. Keep the text large and the speed moderate so the words register.
The testimonial ribbon
Short quotes or star ratings scrolling horizontally make a lightweight social-proof band between major sections. This pairs especially well on service and portfolio sites. Many ready-made layouts already include a tasteful ticker section, and several in our roundup of the best Framer templates for an agency and the best Framer templates for ecommerce ship with logo walls and ribbons you can adapt directly.
Extending the ticker with plugins
The native Ticker covers nearly every marquee need. For specialized motion, such as a ticker that reacts to scroll speed or one with more elaborate easing, a community plugin can fill the gap. We track the strongest options in our guide to the best Framer plugins. As always, only add a plugin when the built-in component genuinely cannot do what the design requires, since the Ticker alone handles the overwhelming majority of cases.
Frequently Asked Questions
How do I create a scrolling logo marquee in Framer?
Add the built-in Ticker component to your canvas, set it to fill the width with a fixed height, and place each logo image inside it once. In the Ticker properties, set the direction to left, choose a slow speed, and add an even gap between logos. Optionally enable pause on hover. The Ticker duplicates your logos automatically to create a seamless, continuous loop.
Why does my Framer ticker have a visible jump or gap?
The most common cause is manually duplicating your content. The Ticker component already duplicates items internally to fill the row, so adding a second copy yourself creates an uneven loop or a visible gap. Add each item only once and let the Ticker handle repetition. If the row looks sparse, add more items or reduce the gap so the content fills the container width.
How fast should a Framer marquee scroll?
Slow enough that visitors can read each item as it passes, often in the range of 40 to 80 pixels per second for logos and text. A marquee that moves too fast becomes unreadable and feels frantic. For purely decorative strips where individual words matter less, a slightly faster pace is acceptable, but when in doubt, slow it down.
Are Framer tickers bad for performance or accessibility?
Tickers animate with GPU-accelerated transforms, so they are generally light, but a row of heavy images running forever is the main risk. Optimize assets, prefer SVG logos, and avoid stacking many complex components in one Ticker. For accessibility, keep the scroll slow and consider a static fallback grid for visitors who enable a reduced-motion preference in their operating system.
If you want a Framer site with motion that earns its place, including tickers and marquees built to perform, our team designs and builds exclusively in Framer. Explore options on our pricing page or start a conversation through our contact page.