asphiii

Cassie you're my hero! I just literally copied an object from motion path and it's working like a charm. Thank you!

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 https://codepen.io/osublake/pen/RwWyroe/7b3d8b77a17de21df95e899db5da0148 . 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?

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?