MotionPathPlugin alignment issue

[ryanpwaldon]

Hi everyone,

I'm having an issue aligning an element (a car) to a path (a road). I've provided a simplified example (the SVG is large, although, I thought it was best to include the entire thing for context).

I'm using the align property with the target path as the value, although it doesn't seem to be working – the car appears a few hundred px away from the target path.

(I'm probably missing something simple)

Would greatly appreciate any help.

Ryan

 

See the Pen LYEwOvW by ryanpwaldon (@ryanpwaldon) on CodePen.

[GreenSock]

Ah yes, that's because that element is a <g> which acts a bit differently. I'll work on a fix for the next release, but in the meantime you can just use the element's bounding box as offsets:

See the Pen 30a3d282ea85251bd63eb59f8c2e4db5?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

Just keep in mind that in the next release with the fix in place, you'll want to remove those offsets. 

[ryanpwaldon]

Thanks Jack, good solution!

[GreenSock]

For the record, I updated that MotionPathPlugin file with a preview of the next release, and it does seem to fix the issue nicely. You may need to clear your cache to see it. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathPlugin.min.js

 

Better?