gsap Uncaught TypeError: Sine.easeInOut.getRatio is not a function

[Figar Ali]

I want to use this parametric waves animation with gsap.min library, currently this is working with TwinMAX. After removing the gsap.min It's working fine but I cant remove gsap.min because other animations or not working without gsap.min

 

I have getting the following error in console.

Uncaught TypeError: Sine.easeInOut.getRatio is not a function

 

 

Anyone can help please?

 

Thanks

See the Pen pWyezW by ThiemelJiri (@ThiemelJiri) on CodePen

[Carl]

That’s a really cool effect. 
 

it looks like you are using a super old version of GSAP though. In GSAP 3 eases are functions as explained in the video below. No more getRatio()

 

 

 

[GreenSock]

Yep, in GSAP 3 it's even easier, as @Carl explains beautifully in the video:

// OLD
Sine.easeInOut.getRatio(diff)

// NEW
var sine = gsap.parseEase("sine.inOut"); // this returns an ease function
sine(diff); // now you can use it as many times as you want.

 

Here's a fork that's updated to GSAP 3:

See the Pen VwWvoxV?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Notice there's no more BezierPlugin because MotionPathPlugin makes things much easier and more intuitive. 

// OLD
var data = BezierPlugin.bezierThrough(values, curviness);
var d = "M" + data.x[0].a + "," + data.y[0].a + " C" + segmentToString(data.x[0], data.y[0]);
for (var i = 1; i < data.x.length; i++) {
  d += "," + segmentToString(data.x[i], data.y[i]);
}

// NEW
var data = MotionPathPlugin.rawPathToString(MotionPathPlugin.arrayToRawPath(values, {curviness: 0.5}));

Happy tweening!