Jump to content
Search Community

Animating waves with GSAP

hellehs90 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 15
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 ?editors=0010 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

  • 2 years later...
  • 5 months later...

Hey everyone, hope you all are having a good new years so far.

I have a question that is probably best directed towards @OSUblake, the stuff you have created on this page is awesome.

The stuffed tentacles animation, is there a way to apply that without using Pixi? I have been playing with feTurbulence, feGaussianBlur and feColorMatrix to try to mimic the turbulent displace effect like in after effects. While I was able to achieve something that was almost representational of what I was trying to achieve, the inconsistency of the loop cycle keeps making cycling back to the stuffed tentacles. 

Basically I have a rectangle that I 'am trying to make "wavey" to give a false sense of motion. I have tried doing the wave through morphSVG, but I'm not liking the results I'm getting from my end.

See the Pen PoGBLLv by brob-84 (@brob-84) on CodePen


Thanks guys

PS first post, and new to the game

Link to comment
Share on other sites

  • 4 months later...

Hey @mikel, sorry for the overdue response, I have moved on from where I was previously, but this how I solved things. I used a easing similar to what @OSUblake mentions for creating his sinewave. I then had three states of the turbulence/waves on then animated them super fast. This is used in 3 different objects. Thanks again for your help.

See the Pen abmREqE by brob-84 (@brob-84) on CodePen

  • Like 4
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.
  • Create New...