Bezier autoRotate Problem - Image not middle centered along path

[Technics1210 12 Likes (Newbie)]

Hi,

 

i am using the "pathDataToBezier" function to follow an image (car) along an SVG path.

 

When not using the autoRotate function (false) - the top left corner of the image is right on the path / track , but when i am using the autoRotate function "true" - the image is not x/y centered in the middle of the path and have some weird offset in the curved areas.

 

// animate road
var path = MorphSVGPlugin.pathDataToBezier("#roadPath");

TweenMax.to("#car", 5, {bezier:{values:path, type:"cubic", autoRotate:true}, ease:Linear.easeNone, repeat:-1});

the image is a 22x10px image, which should rotate in the middle / center of the image along the path...

 

What do I have to change?

 

Have a look at

 

 

 

 

See the Pen vmxdLz?editors=1111 by technics1210 (@technics1210) on CodePen

[PointC 11,163 Likes (Superhero)]

Hi Technics1210 

 

Please try this:

TweenLite.set("#car", {xPercent:-50, yPercent:-50});

Happy tweening.

[Technics1210 12 Likes (Newbie)]

F.A.N.T.A.S.T.I.C.

 

 

Thx PointC! for the superfast solution.