malformed path if specified by ID, but same path works if specified raw

[smhxyz]

I'm at a loss.

 

This works:

 

gsap.to("#my-square", { duration: 5, motionPath: "M 1,104 Q 111,94 86,69 61,44 76,29 91,14 151,5.43" });

 

albeit with an error.

 

This fails:

 

gsap.to("#my-square", { duration: 5, motionPath: "#curve1" })

 

same error then infinite loop (malformed path).

 

Same SVG.  Same path. 

 

<svg

width="160"

height="106"

viewBox="-0.5 -0.5 150 150"

id="svg3"

 

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

 

<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet"

href="../style.css" type="text/css" />

 

<defs

id="defs1" />

<g

id="g3">

<g

id="g2">

<path

d="M 1,104 Q 111,94 86,69 61,44 76,29 91,14 151,5.43"

fill="none"

stroke="#000000"

stroke-width="3"

stroke-miterlimit="10"

pointer-events="stroke"

id="curve1"

/>

<path

d="M 157.68,4.47 149.41,10.2 151,5.43 148.13,1.29 Z"

fill="#000000"

stroke="#000000"

stroke-width="3"

stroke-miterlimit="10"

pointer-events="all"

id="curve2" />

</g>

</g>

</svg>

 

 

 

 

 

does-not-work.log works.log

[PointC]

Nothing jumps out immediately at me as to why that would be a problem. But it's hard to say without a minimal demo. If you can provide that, someone can most likely point you in the right direction.

 

Happy tweening.

[smhxyz]

Cannot reproduce with CodePen so just close.

[GreenSock]

Maybe try making sure you've got the latest version of the files? I'm totally guessing here. Very tough to say without a minimal demo, sorry.