Streaming live at 10am (PST)

How to get row of logos to continually move in one direction


#1

Hi,

I need to create three rows of logos. The top row should move slowly to the left continuously. The middle row should move to the right in the same way. The bottom row should also move to the left in the same way as the top row. I’m trying to figure out a way to do this so it can be continuous. In other words if the row contains just 10 logos how can it loop so it can move continuously in one direction?

Any help much appreciated. Thanks


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

You’ll need custom code to make it loop seamlessly. Otherwise if you are ok with a slight jump when the loop resets in IX2, you can try what they did here How to do Webflow Customer page interaction


#3

Thanks very much for drawing my attention to that. I don’t think I have quite grasped it but have attempted a version at https://preview.webflow.com/preview/beaufort-12?preview=25ef7d878eea2c7be62ed2dc9b0e0747 Scroll down to just above the footer to see the logo section.

It sort of works in theory but am having an issue with the speed. The first div suddenly speeds up on the second loop. I have tried it in Interaction 1.0 with the same result.

Can somebody please let me know where I’m going wrong?

Thanks


#4

Great question @sparky setting up looping animations can definitely be tricky!

I took a look at your site and noticed a few items:

  1. Your div for logos needs to be set to overflow: hidden to prevent any odd overflow issues:

  2. Make sure that the timelines are the same for both sets of animations so that they’re on the same timespan rather than having one on 30 seconds and another on 15 seconds as that will cause the animation to be un-synced.

  3. Make sure that the offsets are by 100% rather than 110% as that could cause some odd timing issues with the animation

I hope that this is helpful! It sounds like a tutorial may be helpful in achieving the desired effect, let me see if I can get one of those put together :bowing_man:


#5

Thanks for the tips Waldo. I have FINALLY figured it out. I had misunderstood a key aspect which is that the first set of logos has to momentarily overlap the second, duplicate set of logos and then the animation repeats. Once I grasped that I was able to get there.

Thanks again!


#6

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.