Wave animation


I am trying to create a wave animation from an XD design.

basically, this is the animation. (screen video)

So I am not sure what is the best way to create it.

I thought that I should take an image with the wave only, and use transition, but this does not make the animation smooth. It’s a bit “laggy”

Also after the wave has finished I want to stop it in this part because the rest of the page will have the same color.

Has anyone any idea about it?

I am not sure if its easy also to create a clip path for the wave, but I need to be exactly as the design.

Here is an image that I have export with the full wave and one with the end part.

Maybe you can match your wave with a linear gradient and a mask and do something like this.

There’s a wave generator here:

You’d have to check browser support etc.

I think it has the same effect as my trial.

It seems a little bit laggy, right? I mean it’s not super smooth

Looks super smooth to me even in the codepen. These issues can be related to the machine they run on sometimes.

You may get a slightly better performance using the translate3d for the animation;

translate3d(-300vw, 0, 0px);

Other than that animating anything which has transparency will be quite intensive. (I assumed you wanted an image to appear in the transparent part of the wave? It’s probably the mask and transparency that will be a hold things up)

Here’s a slightly rearranged version but looks much the same to me.

Have a look here for ways of increasing animation performance.

1 Like

yeah maybe its the machine that I used. Will try to check in another one too.

Thank you, will check this one too!

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