Jump to content


Undulation, undulate, undulating...

Recommended Posts

Just wondered if any geniuses out there had any tips for a clean undulating animation for a path?


Like a balloon string, or water, or a cape or sheet in the wind?


I know there are various ways to approximate it, and I have fiddled around a bit previously, but wondered if there is a good method to do this.


Perhaps an SVG path with lots of points and straight lines between, where you can run a stagger animation on the points? But then you'd have to be able to target points specifically in the SVG somehow.


Would love to know your thoughts. Very basic example included, but you can see the curvy paths with control points don;t animate so well.



See the Pen wMRwwE by spacewindow (@spacewindow) on CodePen

Link to comment
Share on other sites

Hi @spacewindow!


How about something like this? 

See the Pen GoPpKL by Acccent (@Acccent) on CodePen

You could achieve the same effect by manipulating the background-position of an element.


Let me know if that works for you :)


edit: I tweaked it so it looks like the topmost point stays in the same position. This involves some fiddling and calculating but I'm sure you'll figure it out!

  • Like 4
Link to comment
Share on other sites

Take a look at our MorphSVG demo: http://codepen.io/GreenSock/pen/WQjRXE?editors=0010


A lot of work went into making the cape wave around.


You will notice there is some code in there to build the flap animation:


waveSVG(document.getElementById("capeBottom1"), {taperEnd: 80, taperStart:2, loose:true, length:120, angle:-52, magnitude:10, phase:110, duration:2, start:6, end:15, repeat:10}),
waveSVG(document.getElementById("shadowBottom1"), {taperEnd: 80, taperStart:2, loose:true, length:120, angle:-32, magnitude:10, phase:110, duration:2, start:7, end:12, repeat:10}),
waveSVG(document.getElementById("shadowTop1"), {loose:true, length:120, angle:-16, magnitude:20, phase:-140, duration:2, start:10, end:14, repeat:10}),
waveSVG(document.getElementById("capeTop1"), {loose:true, angle: 70, length:120, magnitude:10, phase:20, duration:2, start:2, end:9, repeat:10})

Take a peek at the waveSVG function if you are curious to investigate more.


This function is not an official part of the GSAP API nor something we support. If you feel adventurous though feel free to use it. 

waveSVG() requires that you have MorphSVGPlugin loaded.




  • Like 3
Link to comment
Share on other sites

Thanks Acccent, yes I considered doing something like that, and for this case it is a pretty elegant solution!


I think I will have a play with the waveSVG() function.


PS I snuck in a sub question about targetting and animating specific points in an SVG – but I will post this as a separate topic. Thanks all.

Link to comment
Share on other sites

Hi spacewindow  :),


In answer to your sub question - yes you can target points. These GreenSock pens should be of use to you: 

See the Pen gPGOxL by GreenSock (@GreenSock) on CodePen


See the Pen MaabXe by GreenSock (@GreenSock) on CodePen



Check out this blog post as well (Tween complex string-based values section)



Hopefully that helps a bit.


Happy tweening. :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.