Jump to content
GreenSock

aashby13

GSAP 3 - replacement for BezierPlugin.bezierThrough()?

Recommended Posts

I'm converting a project using gsap 2 to gsap 3. BezierPlugin.bezierThrough() is used, but I don't see a compatible method in the MotionPathPlugin. What would I use to replace that function?

Link to comment
Share on other sites

Hey aashby13 and welcome to the GreenSock forums! 

 

I believe that MotionPathPlugin.arrayToRawPath() is a replacement for bezierThrough(). I use it in a demo in this thread:

Sorry about the state of MotionPath docs right now. It's high on our to do list. 

  • Like 1
Link to comment
Share on other sites

Hi Zach, thanks for the reply and link. 

 

MotionPathPlugin.rawPathToString(MotionPathPlugin.arrayToRawPath(xyObjArray, {curviness: 1.2})) was just what I was looking for. I had to dive into the source code to see what argument options I had.

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

Hi Zach,
How the keyValue of c is determined from

the value return from BezierPlugin.bezierThrough(),

Link to comment
Share on other sites

Hi @Jim Tim

 

I'm not sure I understand your question. Can you please provide a minimal demo of what you are trying to do? Thanks!

  • Like 1
Link to comment
Share on other sites

well @OSUblake,
i'm trying to convert bezierThrough() to version 3 MotionPathPlugin.arrayToRawPath()

 the problem is that i have some sort of calculation with the values  which is return by bezierThrough() , but motionPathplugin.arraytoRayPath() version 3-

returns an array  which is not similar to previous version.
so i want to know how  the second control point value of the Cubic Bezier segment    has been calculated in version 2 in the keyValue called c.
or is there any possible to get the same values which is returned by bezierThrough() , in version 3.
thanks in advance man

Link to comment
Share on other sites

So the arrayToRawPath returns a raw path, which is an array of arrays, with each nested array representing the start of every M command. Since you're just feeding an array of values, there will only be 1 nested array.

 

That array is the x and y points following a cubic number of points, so the first 2 values would be equivalent to a, the next 2 would be b, the next 2 would be c, the next 2 would be d, and then that pattern repeats for b, c, and d.

 

[
  [0, 100, 50, 120, 80, 110, 100, 100, 30, 20, 60, 50, 100, 200]
]

// would be like this
[
  [a.x, a.y, b.x, b.y, c.x, c.y, d.x, d.y, b.x, b.y, c.x, c.y, d.x, d.y]
]

 

So you can loop through and get whatever values you want. If you're just looking to make an SVG path, you can skip the loop and just use .rawPathToString().

 

This demo shows both methods being used.

 

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

 

Link to comment
Share on other sites

@OSUblake ThankYou man that was really helpful ,
now for some array of co-ordinate i get a sharp edged curves , how to resolve this? i need smooth  bending  curve.Untitled.png.d8495d811287cf1900955f7ca524b460.png

  • Like 1
Link to comment
Share on other sites

I've updated the algorithm in the next release to handle situations like that better. https://assets.codepen.io/16327/MotionPathPlugin.min.js

 

It looks like CodePen is having a tough time with caching, so you may need to add a URL parameter to the end to force it out of cache, like: https://assets.codepen.io/16327/MotionPathPlugin.min.js?v=3.10.0

 

  • Like 1
Link to comment
Share on other sites

I'm getting that issue in my project to i'm using gsap version 3.9.1

Link to comment
Share on other sites

Correct. That's why I said I updated the algorithm in the NEXT release (which isn't released yet) :)

 

You're welcome to use that beta file I linked to in the meantime. Do NOT link directly to that, though, since I update that regularly and I wouldn't want your project to inadvertently break - download the file and deploy it with your other JS on your server.  

Link to comment
Share on other sites

thank you for the response .

//  NEXT release (which isn't released yet) :- is there  any  appropriate estimation  like when will the next version will be released .

Link to comment
Share on other sites

is there any changes in amount of curviness applied based on curviness parameter value in gsap version 3,
Because  i was used 1.25 as a curviness value in version 2, 

if i use the same the result is not same , now i'm using 0.5 in version 3.

Link to comment
Share on other sites

23 hours ago, Jim Tim said:

is there  any  appropriate estimation  like when will the next version will be released

No, we can't share dates like that but I'd say there's a good chance it'll be out by March 1st.

 

11 hours ago, Jim Tim said:

is there any changes in amount of curviness applied based on curviness parameter value in gsap version 3,

It's using the curviness algorithm from GSAP 2's BezierPlugin, yes.  

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.
×