motionPath question - my path doesn't line up!

[Paddy]

Hi,

I'm new to Green Sock and to this forum (and new to SVG animation too!) Green Sock is making it possible to do things that would stump me if I tried doing using other methods.

I'm trying out motionPath, but I've found I've had to move my motion path (the pink line in the attached image) to get the motion to happen in the black shape. Can anyone suggest what I'm doing wrong? I suspect I'm doing an unnecessary translation or scale somewhere but I don't yet understand SVG code well enough to spot it. (the graphics were drawn in Inkscape originally)

Thanks in advance

- Paddy

 

Here are some relevant parts of the code:

 

<path
   id="animationPath"
   style="fill:none;fill-opacity:1;stroke:#ff00f7;stroke-width:0.21282795;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
   d="m 0.5,3.1 c 0.1,0.1 -18.7298199,88.015311 36.5651001,78.835771 7.69427,-1.20978 17.49192,-4.68442 21.99463,-9.21188 5.30664,-5.7414 7.468,-8.352641 7.47701,-20.101821 8e-5,-14.54837 -11.86949,-25.94952986 -27.66693,-25.94947986 -15.79744,-4e-5 -26.9913601,11.91775986 -26.9913101,27.71519986 0.0133,8.14082 2.92998,23.248381 29.1769301,27.535251 47.76889,4.27096 43.47137,-46.1381609 32.86151,-99.135311"
   inkscape:label="#path888-5"
   inkscape:connector-curvature="0"
   sodipodi:nodetypes="ccccsccc" />

......

  <rect
     style="fill:#ff0000;fill-opacity:0.70588235;stroke:none;stroke-width:1.44497728;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
     id="redShape"
     width="7.8197494"
     height="9.973732"
     x="9.415514"
     y="-2.6867492"
     ry="1.7497774"
     transform="matrix(0.98797435,0.15461785,-0.31145717,0.95026019,0,0)"
     inkscape:label="#rect845" />

 

...........

</svg>

gsap.to("#redShape", {
    motionPath: {
        path: "#animationPath",
    autoRotate: true,
    alignOrigin: "0% 50%"
    },
    transformOrigin: "50% 50%",
    duration: 9,
    ease: "power1.inOut"
});

 

[ZachSaucier]

Hey Paddy and welcome to the GreenSock forums!

 

It'd be quite helpful to see your full SVG paired with the animation in something like a CodePen. This thread can help you get that setup if need be:

 

However, there are some things incorrect about your motionPath code:

gsap.to("#redShape", {
    motionPath: {
      path: "#animationPath",
      // You probably also want to align the object with the original path
      autoRotate: true,
      alignOrigin: "0% 50%" // This needs to be an array
    },
    transformOrigin: "50% 50%", // This is unnecessary most likely
    duration: 9,
    ease: "power1.inOut"
});

As such, I'd try this:

gsap.to("#redShape", {
    motionPath: {
      path: "#animationPath",
      align: "#animationPath",
      autoRotate: true,
      alignOrigin: [0, 0.5] // If you want it to be aligned by its center, use [0.5, 0.5]
    },
    duration: 9,
    ease: "power1.inOut"
});

Also, make sure you're using the most recent version of GSAP and MotionPathPlugin (3.2.4). Let us know if this helps or if you have other questions! 

[Paddy]

Thanks for suggestion; I've got into trouble previously over sharing what I'm working on, hence no CodePen. I had another look and removed the transforms on my coloured shapes and they seems to be animating in the right places now.