Streaming live at 10am (PST)

Create loop effect with several elements


#1

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)


#2

Hey @Anders_Skaarup_Chris,

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


#3

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


Need help looping an interaction
#4

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 :slight_smile:

Again, appreciate your help!

Best Regards,
Anders


#5

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

http://template-3-ss18.webflow.io/


#6

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


#7

Hi Christopher,

Would it be possible to copy your project. Can’t get mine to work at all, been trying it all now :frowning:


#9

Hey Anders, had a quick look and there were just a couple of things wrong. Got it to work by

  • Deleted all the Initial Appearance Display None out - I’ve found they can tend to confuse Looped sequences. With the red square in front you can’t see the others anyway.
  • the blue square had no defined Height and Width - Position Absolute requires these otherwise it defaults to 0px 0px
  • the yellow square had no B/G colour assigned

Working perfectly for me now

Cheers

Peter


#10

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

Cheers

Peter


#11

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