aashby13 Posted February 6, 2020 Share Posted February 6, 2020 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 More sharing options...
ZachSaucier Posted February 6, 2020 Share Posted February 6, 2020 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. 1 Link to comment Share on other sites More sharing options...
aashby13 Posted February 7, 2020 Author Share Posted February 7, 2020 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. 1 Link to comment Share on other sites More sharing options...
Jim Tim Posted January 28, 2022 Share Posted January 28, 2022 Hi Zach, How the keyValue of c is determined from the value return from BezierPlugin.bezierThrough(), Link to comment Share on other sites More sharing options...
OSUblake Posted January 28, 2022 Share Posted January 28, 2022 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! 1 Link to comment Share on other sites More sharing options...
Jim Tim Posted January 28, 2022 Share Posted January 28, 2022 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 More sharing options...
OSUblake Posted January 28, 2022 Share Posted January 28, 2022 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 More sharing options...
Jim Tim Posted January 30, 2022 Share Posted January 30, 2022 @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. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted January 30, 2022 Share Posted January 30, 2022 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 1 Link to comment Share on other sites More sharing options...
Jim Tim Posted January 30, 2022 Share Posted January 30, 2022 I'm getting that issue in my project to i'm using gsap version 3.9.1 Link to comment Share on other sites More sharing options...
GreenSock Posted January 30, 2022 Share Posted January 30, 2022 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 More sharing options...
Jim Tim Posted January 31, 2022 Share Posted January 31, 2022 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 More sharing options...
Jim Tim Posted January 31, 2022 Share Posted January 31, 2022 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 More sharing options...
GreenSock Posted February 1, 2022 Share Posted February 1, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now