How can I create a responsive, infinite-scrolling logo marquee in Wix Studio without overlap or gaps?

Ask the community
, ,
1

Product: Wix Studio Editor

I’m trying to build a horizontally scrolling marquee of brand logos that loops seamlessly from right to left. It should work responsively across all screen sizes (desktop and mobile). I want it to appear infinite — as one stack of logos moves out of view, a second identical one should follow, so it feels continuous with no visual jump, overlap, or gap.

What I’ve tried so far:

  • I created two identical horizontal stacks of logos (each ~2093px wide) and placed them side by side.
  • I used Wix’s Cross Loop scroll effect to animate them right to left.
  • I offset the second stack by left: 100%, and also tried pixel-based positioning using left: 2093px.
  • I set linear animation timing and zero repeat delay.

Everything looks good at first, but since the stacks are wider than the viewport, I still get slight overlap where the end of one stack collides with the beginning of the next. It breaks the seamless loop effect.

Additional information:

  • Each logo has 50px spacing between them.
  • I want to avoid converting the entire logo strip into a single image if possible — I’d like to keep each logo separate for flexibility and interactivity.
  • I’d prefer a native Wix Studio solution without custom code, but am open to using custom CSS if that’s the only reliable option.

Any suggestions or examples of how others have implemented a responsive marquee like this in Wix Studio would be much appreciated!

2

Hey! You’re really close, I’ve done this in Wix Studio before and ran into the same issue.

Here’s what worked for me:
Keep the two identical stacks side by side inside a container with overflow hidden.
Instead of using Cross Loop, try Timeline animations:
Set both stacks to scroll using TranslateX, with linear timing, no delay, and set to repeat.
The first stack moves from 0% to -100%, and the second from 100% to 0%. That makes it feel seamless.

Also, small gaps or overlaps usually happen when the widths are slightly off — even by 1px. Double-check your logo sizes and spacing, or try using percentages instead of pixels.

If you want, I can take a quick look and help you set it up properly, happy to help!