I want to use interactions to make an asset move across the screen from left to right. Then, once it is out of view, I want it to loop back to the start a move again. This part is not difficult.
The tricky part here is that I want the same asset to move across the screen behind this first asset starting a few seconds after the first interaction has started. At first I thought I would use a Wait to accomplish this, however it gets problematic when I incorporate a Wait into the loop of the second asset… because it waits after every loop.
How do I make two assets loop across the screen in tandem?
To see what I’m talking about in practice, please visit this webpage and scroll to “3. Engage Prospecting Intelligence”. Observe the asset on the right. I want this image to repeatedly scroll in a perfect loop on the “conveyor belt” (seemingly never ending).
Any help/pointers would be much appreciated. Perhaps I should just make a looping gif instead?
I am struggling with this due to the necessity to include a delayed start (using Wait) on the second asset… whenever it loops, it includes the Wait in the loop and stalls it more and more every loop. I might be confusing the logic here, though.
I see. Completely theoretical here, what if you had them side by side as siblings instead of separate elements and they both move left to right with no wait?
Without using Wait, the first image to complete the movement across the screen will “Move to Origin” then immediately begin it’s movement behind the second asset to create the desired illusion. However, the second asset to complete the movement across the screen will move to an origin twice as far to the left off the screen and will take twice as long to go on screen as a result.
What you will see is the following:
Asset 1 moves across the screen
Asset 2 moves across the screen immediately behind Asset 1
Asset 1 now moves across the screen immediately behind Asset 2
A gap occurs as Asset 1 takes too long to make it to the left side of the screen from it’s origin
Both Asset 1 & 2 move across the screen at the same time
Repeat
That being said, I suppose this could work if I expand the logic to include a third asset. There will, at that point, always be at least one asset moving across the screen. Sometimes it will be layered on top of another asset, but that accomplishes the goal.
This plan failed. Apparently there is a max of 2000px you can horizontally transform something in Webflow.
Edit: @DigtalCrusader I’ve settled with creating 9 hidden copies of the same asset and setting them to start at periodic delays without looping to create the desired effect. As long as they’re not on my page for more than 5 minutes, I should be fine
