Migrating 'pathDataToBezier' from GSAP2 to GSAP3

[asphiii]

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?

[Cassie]

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

https://codepen.io/GreenSock/pen/LwzMKL?editors=1010

[asphiii]

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?
 

[Cassie]

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.

 

[asphiii]

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

[Cassie]

Hooray! So glad we got there!