Streaming live at 10am (PST)

Design Help - Stuck on creating this ripple animation!

#1

Hey all!

Hm…I am super stuck on this one. I am trying to create a cool ripple effect like this website. I have tried all sorts of things and am pretty well-versed in Webflow interactions, but either my timing is wrong or I am messing up the loops (probably both at this point as I have now gone crazy watching these circles haha). FYI, I offset each circle and added different colors to each one to keep me somewhat sane while I try and animate this! If anyone has an idea here, I would greatly appreciate it.

Thank you!

My read-only share link
My live url

#2

Hey @myonke,

The main problem with the IX2 is that when you apply a delay and loop the animation, your delay will loop as well, which will create a delayed loop every time. For a looped animation such as this, you will need an option to delay the loop only on the first time it runs.
CSS for the rescue :star_struck:

I quickly made this for you :smiley: with a bit of custom code in the “before </body> tag”
The timing might be a bit off, but if you know a bit css, you can edit easily.

2 Likes
#3

@avivtech You are awesome - tinkering with the timing now, but this is going to work great. Thank you for taking time to help me out. Really appreciate it man!

1 Like