Wave Transition Effect

Design help Animations & Interactions
1

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/)

2

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
3

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
4

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

5

Haha thanks, glad I’m off some help.

6

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