asphiii Posted March 7, 2023 Share Posted March 7, 2023 Hello, I'm trying to migrate the code from GSAP2 to GSAP3. I manage to rewrite almost everything, but I'm stuck with the changes inside the MorphSVGPlugin. In GSAP2 I had the following code: const path = MorphSVGPlugin.pathDataToBezier( exampleLineNode, { align: "relative" }); .....//later in gsap.timeline .to(anotherNode, 1, { bezier: { type: "soft", values: path, autoRotate: 90 }, ...... where exampleLineNode <path id="exampleLine" fill="none" stroke="#DDDDDD" stroke-width="5" stroke-miterlimit="22.9" d="M829.3 313.6V294c0-9 7.2-16 16-16H928c9 0 16 7 16 16v131.7"></path> My problem is I have no idea how to replace "pathDataToBezier" function. I've read So I changed the code in the timeline motionPath: { path: path, autoRotate: 90 }, but still, I have no idea how to provide correct data to the path in the motionPath. I've tried MotionPathPlugin.rawPathToString(exampleLineNode) but without luck (it doesn't return anything, I have Uncaught TypeError: Cannot read properties of undefined (reading '0'). I tried to insert the raw d attribute from the <path>( I mean: 'M829.3 313.6V294c0-9 7.2-16 16-16H928c9 0 16 7 16 16v131.7'), but the element disappears without an error. What I'm doing wrong? Link to comment Share on other sites More sharing options...
Cassie Posted March 7, 2023 Share Posted March 7, 2023 Hey there! Would you mind popping together a minimal demo for me? I'll take a look - It would be great to know what you're trying to accomplish visually, rather that what code you're trying to swop out. You can fork this demo which has the right plugins loaded alreadyhttps://codepen.io/GreenSock/pen/LwzMKL?editors=1010 1 Link to comment Share on other sites More sharing options...
asphiii Posted March 7, 2023 Author Share Posted March 7, 2023 4 hours ago, Cassie said: Hey there! Would you mind popping together a minimal demo for me? I'll take a look - It would be great to know what you're trying to accomplish visually, rather that what code you're trying to swop out. You can fork this demo which has the right plugins loaded already Sorry, I'm too fresh in terms of GSAP to provide you repro code. I'll try to be more precise. I want almost the same thing as it is in See the Pen 7b3d8b77a17de21df95e899db5da0148 by osublake (@osublake) on CodePen . The only difference is that I have a node(to the path with the d attribute) instead of a Bezier Path. In GSAP2 it works like this: pathDataToBezier produces an array with X and Y points; for instance: [{x: "+=0", y: "+=0"}, { x: "+=0", y: "+=-6.5333"}, ....] You can generate this data through the pathDataToBezier(from MorphSVGPlugin) command, where one of the parameters is a node. Then, I'm passing it to TweenMax's bezier object, where you may find "values". And that's all, the object moves along the line - exactly as it is in the Codepen above. Since GSAP3 I don't have pathDataToBezier, and I don't have TweenMax. I was looking at GreenSocks Migration Guideline and I know that TweenMax is simply "gsap". But how about pathDataToBezier? How can I generate the path from the node's "d" attribute to the one that MotionPath understands? Link to comment Share on other sites More sharing options...
Solution Cassie Posted March 7, 2023 Solution Share Posted March 7, 2023 Ah ok, just animating along a path? Quote How can I generate the path from the node's "d" attribute to the one that MotionPath understands? If I understand correctly you can just path the path or the copy in the d attribute. This is why I wanted to see your particular situation and the SVG code you're using, largely to see if there's a typo or something, it should just be nice and simple! See the Pen LwzMKL?editors=1010 by GreenSock (@GreenSock) on CodePen Quote Sorry, I'm too fresh in terms of GSAP to provide you repro code You can copy paste the SVG into the pen I linked to and click save, then send me the link - it doesn't have to work. I'll sort that out for you. 1 Link to comment Share on other sites More sharing options...
asphiii Posted March 7, 2023 Author Share Posted March 7, 2023 Cassie you're my hero! I just literally copied an object from motion path and it's working like a charm. Thank you! 3 Link to comment Share on other sites More sharing options...
Cassie Posted March 7, 2023 Share Posted March 7, 2023 Hooray! So glad we got there! 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