Streaming live at 10am (PST)

Wave Transition Effect

Hi there!

Is there any way or tutorial/cloneable that shows how to achieve that “wave” transition effect? (green section).
I can’t figure out the way to do it and couldn’t find anything about it either.

Thanks a lot!

ezgif.com-gif-maker (1)

(website: https://www.chartercitiesatlas.com/)

Please check my Webflow site I just created for you.

https://preview.webflow.com/preview/wave-transition-effect?utm_medium=preview_link&utm_source=designer&utm_content=wave-transition-effect&preview=ec850fb3f28f0e6d0021d45ef6fa8d8c&workflow=preview

1 Like

By the way, the trick here is to add a round div inside the section and position should be absolute.

Now you should you apply While scroll animation and add transition to the background element, transition should be for size. Size should be so big that it should cover the whole section. And there is a small trick at the end so it best check the Webflow site above.

1 Like

You’re a legend. That’s exactly what I was looking for. Thanks a lot!

Haha thanks, glad I’m off some help.

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