Infinite marquee slider not looping smoothly

Design help Animations & Interactions
1

Hello Webflow.
I’m designing a website and have found myself struggling. The site is in Danish but I’ve used English terms when building the site, so I hope it makes sense :slight_smile:

Infinite marquee slider
I want to have an infinite slider showcasing some companies (12 in total). My problem is that it doesn’t have a smooth transition when starting over, it does a “jump”. I’ve tried following multiple tutorials but the “jumping” issue has happened everytime. The current solution i’m using is with custom code I found online and now the only issue is the “jump”. What am I overlooking?

Here is my public share link: Webflow - Hird Consulting

(how to access public share link)

2

Hi there - there’s a few changes you could make to this.

  1. Delete that hidden “marquee_horizontal” section and the “endless loop” page load interaction, they’re just causing conflicts.
  2. Duplicate your “inner_container” so that there are enough images to fill up the full marquee
  3. Create a new div (I’ll call it “inner_container_holder”). Put this inside of your “container_” element and put the two “inner_container” elements inside of it.
  4. Set this “inner_container_holder” element to display flex
  5. Create another div and place it inside of the “container_” element. I’m going to call this one “marquee_holder”. Put the “inner_container_holder” inside of the “marquee_holder”.
  6. Set the “marquee_holder” to flex. Give it a width of 100%.
  7. Now go back to the “inner_container_holder” and set its flex child settings to don’t shrink or grow (the |x| icon).

The steps above take care of the HTML/structural problems. Now, you can update the custom CSS. You could put this in your custom page head like you currently have it, or you could put an embed element directly on the page and place your CSS there (then you’ll be able to see the animation happen inside of the designer and not just when you publish).

Here is the CSS you’ll want to use. If you change the class names from what I have above, you’ll need to change the name in the CSS as well.

<style>

.inner_container_holder {
  animation: marquee-horizontal 40s linear infinite;
  /* manipulate the speed of the marquee by changing "40s" line above*/
}

@keyframes marquee-horizontal {
  100% { 
    transform: translateX(-50%);  
  }
}

</style>
3

Hi Carly! Thank you so much for taking your time looking at my project and giving me such a thorough answer - it is much appreciated! :slight_smile:

I did all the steps but now i’m facing new problems. When I duplicated the “inner_container” the images are now on top of each other. Also the “jump” is still happening when the animation starts over. Do you have any ideas as to how to fix this?