Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Paddy

motionPath question - my path doesn't line up!

Recommended Posts

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"
});

 

gsap-wrong-position-motionpath.png

Link to comment
Share on other sites

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! 

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×