Jump to content
Search Community

GSAP 3 - replacement for BezierPlugin.bezierThrough()?

aashby13 test
Moderator Tag

Recommended Posts

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

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

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

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

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