Water Effect Animation

At a glance

The community member is trying to reproduce an animation effect from a CodePen example in their Webstudio project, but is having difficulty with the CSS and keyframes. They have tried embedding the HTML and CSS, but the animation is not working as expected, with the animation restarting each time.

Other community members suggest that embedding the entire code may be necessary, as it can be difficult to use Webstudio natively for this type of animation. They also share a couple of example projects that have similar issues with the animation not being fluid.

One community member found a solution on another CodePen example that worked better for them, but the original poster is still trying to understand the steps to properly implement the animation natively in their Webstudio project.

Useful resources

XXeglion

https://codepen.io/coiger/pen/NWYgxgj
I'm trying to reproduce this effect in a background without the percentage, I just want the movement of the svg. But I can't reproduce it in Webstudio.
I don't really understand the steps to follow to place my Keyframes and the css parameters in relation to the different <div>.
Your help would be valuable, because when I try to reproduce an animation elsewhere the task becomes complicated, because I don't really know where to start and the steps to follow.

13 comments

OOleg Isonen

paste html into html embed, add above that html ....
<style>here css</style>

OOleg Isonen

use client only setting on

MMilan Boisgard | Uncode School

It seems possible to do it with Webstudio. The best ieda would be to give the URL and / or the code to chatGPT and help you to understand the code !

Some CSS has to be in an HTML embed to work! 🙂

XXeglion

I'm trying to do it natively actually. I managed to set up the svg but as soon as I move on to the animation it doesn't work even by calling the dedicated class.
For the animation I put it in an html embed

XXeglion

I think we have to embed everything, it's difficult to use Webstudio natively for this kind of case. In any case, at the moment I can't.

XXeglion

I have some kind of animation repeat that is seen every time it restarts

KKerim

Have a look at https://wave-qjarp.wstd.io/

KKerim

Source project at https://p-326f06d2-e50c-4368-b7f4-6386dba493d5.apps.webstudio.is/?authToken=364b0e44-4bbf-4f93-bda6-eede5ce938aa&mode=preview

XXeglion

Yes you have the same problem as me, the animation starts again each time it is not fluid

KKerim

Yup, don't know what causes that.

XXeglion

I found the solution, this one worked better for me : https://codepen.io/goodkatz/pen/LYPGxQz?editors=1100

XXeglion

Yes, we should find what is causing the bug in order to avoid ending up with the problem. This is the problem with external codes, we have to go back over them to see where it is blocked.

XXeglion

Hence my thinking of trying to natively pass an external code.

Add a reply

Join the Webstudio community

Water Effect Animation