Best approach to animate a wavy line

[JonoUWE]

Hey all. I've got a wavy svg path that I need to animate but articulating the exact nature of the animation I'm looking for isn't the easiest so bear with me. I need the effect to look like a cross section of waves moving, so each peak moves up and down slightly staggered behind the peak to its right. Each control point on the path will need to go up and down but there'll also need to be some rotation involved too I think to make it look natural. the complicating factor is the big dip in the middle of the path, but that needs to stay. I've been trying to figure it out but have got nowhere. Would gsap be the best thing to use here? Or is there an easier way of doing it that I'm blind to?

 

 

See the Pen eYXQOBq by mrjonoces (@mrjonoces) on CodePen

[mvaneijgen]

Have you tried creating two shapes and then morphing them? That would be the most simple solution.

 

What you also can do is write out the path by hand and then update individual points directly with code, to me this is really magic and hard to understand, but with it you get the most control over what the animation is doing. Chris Gannon did a tutorial how you could go about doing this might be a good starting point. Hope it helps and happy tweening! 

 

See the Pen KKpzMJd?editors=0010 by chrisgannon (@chrisgannon) on CodePen

 

 

[Cassie]

I hadn't seen this video! What a gem!

[Rodrigo]

Hey seems like @chrisgannon has been hiding this gem from us, now there is no choice but the bookmark Chris' youtube channel as well 😆

 

Thanks for sharing that Mitchel!! 👏

[JonoUWE]

Thanks guys, with the help of the video I've got it working how I need it!