smhxyz

Cannot reproduce with CodePen so just close.

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