Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Animating waves with GSAP

Recommended Posts

I have some stroke (see attachment) that I want to animate so they're moving like waves. I have something similar with DrawSVG but that wont work when I always want the waves to be visible and not be drawn over and over again?

I'm looking for something like this:


As always, thanks!


See the Pen EVJGVj by winkerVSbecks (@winkerVSbecks) on CodePen

Link to comment
Share on other sites

Instead of actually animating the line into a wave..  .. .. Have you considered using masking, and moving a static wavey line being masked?      


smoke & mirrors



  • Like 1
Link to comment
Share on other sites

EDIT: Notice that a flicker may appear in some of these demos. This a hardware acceleration bug Chrome.


You don't need any smoke and mirrors for this. 


You can create circular motion using Sine.easeInOut, and circular motion is a wave...




Look what happens when you plot the x and y values separately. Beautiful waves!






Here's how you can do that with SVG. I'm just animating a bunch of SVGPoints on a polyline that are set to slightly different progress values. 


The amplitude is the height of the wave. The frequency is the distance between waves. And the number of segments is how many points will be added to the polyline. You don't want too many as that can make your animation run slower. Just enough so it looks smooth.


See the Pen 7c235b8b3c2d9bb6cecea6acfff7ff37 by osublake (@osublake) on CodePen



You can animate the amplitude and frequency by applying an ease to them. Every ease has a .getRatio() method, which you can use to get the easing value. So if you wanted to animate the amplitude, you could do something like this...


point.y = amplitude / 2 * Power1.easeIn.getRatio(norm);


To make things interesting, I wanted to test out the CustomEase tool that's going to be coming out soon. I came up with a simple ease that looks like a bell curve, so it starts and ends at 0. Here's how that looks when applied to the amplitude.


See the Pen yakOjY by osublake (@osublake) on CodePen



You can also apply an ease to the frequency/progress value, and even change the shape of the wave. If you reverse your animations, the smooth wave connection gets flipped, creating a pretty interesting sawtooth wave.


See the Pen QKYGyo by osublake (@osublake) on CodePen




Related post with other rendering options...



  • Like 12
Link to comment
Share on other sites

WOW.. who would need Smoke & Mirrors when you have a solid understanding of MATH & SCIENCE ?!    Niiiiiice.

  • Like 3
Link to comment
Share on other sites

  • 1 year later...
On 3/11/2016 at 10:59 PM, OSUblake said:

With a little bit of math we can actually apply a wave to a curved surface  :shock:

See the Pen WoNwYG by osublake (@osublake) on CodePen

Great example!
Math behind "interpolate" and "tangent" functions isn't very immediate, since it merges several points: could you please help me out? :)
I'm using it and trying to invert the direction of the waves, but while in previous examples setting

var norm = 1- i / segments

rather than

var norm =  i / segments


does the trick, in this case it doesn't work. It's probably due to the tangent or interpolation :)

Link to comment
Share on other sites



I think all you have do is switch the order of the points around.


//   var x = interpolate(p3.x, p2.x, p1.x, p0.x, norm);
//   var y = interpolate(p3.y, p2.y, p1.y, p0.y, norm);
//   var tx = tangent(p3.x, p2.x, p1.x, p0.x, norm);
//   var ty = tangent(p3.y, p2.y, p1.y, p0.y, norm);
var x = interpolate(p0.x, p1.x, p2.x, p3.x, norm);
var y = interpolate(p0.y, p1.y, p2.y, p3.y, norm);
var tx = tangent(p0.x, p1.x, p2.x, p3.x, norm);
var ty = tangent(p0.y, p1.y, p2.y, p3.y, norm);



  • Like 1
Link to comment
Share on other sites

On 24/2/2018 at 10:00 PM, OSUblake said:



I think all you have do is switch the order of the points around.


Ouch, interpolation is the only area where I didn't dare to work :)
Thanks a lot!
Still staring at your interpolation magic!


  • Like 2
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.