Hi,
I wish to have several div blocks (which are diffrent color) to loop right after each other. There are 5 different colors which should appear right after each other, and then repeat the same action.
I have troubles how to do this with Interactions.
http://template-collection-ss18-332256.webflow.io/
https://preview.webflow.com/preview/template-collection-ss18-332256?preview=5372830c39f091c43b8318b7ef9cd87b
Here is my public share link: LINK
(how to access public share link)
I just played around with your preview link and found myself experiencing dejavu… read here when I tried exactly what you’re attempting to do - I was unable to do it without using a convoluted workaround (by creating a series of delayed interactions that lasted over 5 minutes in total). Infinitely looping a series of interactions that involve more than one element is inherently difficult in Webflow (maybe impossible without custom code).
I do not recommend you try my solution, but I do have a simple alternative: make a 5 frame looping GIF then insert it into your website as an image. Because you are simply displaying colors, it will be small in size and will loop seamlessly.
If you don’t have experience making GIFs, just reply with the 5 hex colors & how long you want it to wait on each color, and I will make it for you to save you the trouble.
Best,
Christopher
Actually, I found a solution after doing a lot more thinking. Here’s a live example and here’s a preview link for you to mess around with. You will have to create 5 divs that act as invisible pixels to trigger 5 interactions on page-load that each affect a different color-filled div. Hopefully that makes sense.
Here are all the elements you need:
Here are the 5 interactions you need to apply to each pixel:
Key note: the last four interactions in my example are initially set to “display: none”.
Hopefully all of this helps you. For this sort of example, I would still recommend using a GIF considering there can be glitches if a user has poor connection that causes a white flash to appear between the cycle. Perhaps that could be fixed by setting each div to appear a millisecond earlier in the loop (the next div is set to “display: block” a millisecond or two before the last one is set to “display: none”) although this will eventually result in the loop getting de-synchronized. Either way, I wish I knew about this months ago…
Best,
Christopher
Hi Christopher,
Wow! Thanks for taking the time to write such a detailed description and trying to figure out somekind of solution. I will try your last example, and it was actually also my thoughts that trying to make a wait, display block and none. But hadn’t thought about the pixel thing. I would prefer not to generate any GIFs, but simply just have everything done within webflow.
I will try to make your example work, when I have developed it according with other design, I can share you the example and you can see it 
Again, appreciate your help!
Best Regards,
Anders
Hi Christopher,
I have now tried it, with some modifications with your example. But i have some issues with it looping the wrong way, it’s take the colors quite random.
Can you help me take a look at it?
https://preview.webflow.com/preview/template-3-ss18?preview=b4057d440d0a7d251cad2f49a441ffb9
Set this as the last interaction and it should fix it. I also went ahead and clicked “wait for assets to load” on all 5 interactions, but that’s honestly optional.
Best,
Christopher
Hi Christopher,
Would it be possible to copy your project. Can’t get mine to work at all, been trying it all now 
Hey Anders, had a quick look and there were just a couple of things wrong. Got it to work by
Working perfectly for me now
Cheers
Peter
Knocked up a quick project to have a look at
https://preview.webflow.com/preview/colouredboxes?preview=fbcb7a1fb121fca957d283a137c73790
Live page here
http://colouredboxes.webflow.io/
By the way there’s no reason to add 5 divs for 5 boxes - a single div can have 5 interactions on it - I think it’s cleaner this way.
You can clone it here
https://webflow.com/website/colouredboxes?s=colouredboxes
Cheers
Peter
This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.
