Logo loop carousel

Community resources
1

I’ve created a loop but there’s a large blank space between starting the loop again. I’m hoping to get an idea why this is happening from the group. I’ve attached public link

https://preview.webflow.com/preview/new-cactus-site?utm_medium=preview_link&utm_source=designer&utm_content=new-cactus-site&preview=bf03a123b99173e0e89b07680e7e32ae&pageId=665063e9db1cf999fdfb13c2&locale=en&workflow=preview

2

fixed it.

https://preview.com/preview/new-cactus-site?utm_medium=preview_link&utm_source=designer&utm_content=new-cactus-site&preview=bf03a123b99173e0e89b07680e7e32ae&pageId=665063e9db1cf999fdfb13c2&locale=en&workflow=preview

3

Horizontal logo scrolls are actually a little tricky to solve but there’s a few steps to getting your one working:

  1. Set flex child to not grow or shrink on logo-container:
    image

  2. Remove any min or max widths from and flex gap from .logo-container

  3. Remove margin auto and the 56px margin from .logo-container

  4. Set a fixed width for each logo and set left and right padding to add gap’s (I used a width of 13rem with left and right padding of 2rem)

  5. Set object-fit contain for the logos

The way this duplicate scroller logic works is by having the second logo list superimposed on the first one’s original starting position as the first ones animation starts again.

Therefore, the logos must be the same length, you must not have any gaps between the two logo lists and you must set flex to no grow or shrink