This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Alex Venus
Posted Dec 02 - Read on Facebook

Quick question for the animation pros: how would you animate "water" in framer? So i am talking about something like this:

just the wave obviously, i could not find any bezier curve tool or anything that would allow this kind of animation. Do you guys have any idea?


Charles Grugan

My first guess would be to investigate SVG animations for that.

Ban Nguyen

Would love to know the answer, too

Chris Slowik

It’s just a wave png with x position loop

Paul Kooi
Chris Slowik

Here's basically what you posted. looping waves with tap to control depth. I think the waves in that pic are actually going opposite ways. and a bit faster =] But you get the idea, tweak away!

Alex Venus

Nice thank you everyone!

Daniel van der Spuy

You could use GSAP’s MorphSVG plugin to morph the points on an SVG? Seems pretty CPU–expensive though, esp. if it’s on a phone. In reality sprites would make more sense if the animation is always the same anyway. By the way your mockup is literally in my sketchbook hah! Early bird I guess…

Read the entire post on Facebook