Jump to content
GreenSock

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

Bezier autoRotate Problem - Image not middle centered along path

Recommended Posts

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

Link to comment
Share on other sites

Hi Technics1210 :)

 

Please try this:

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

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

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

 

 

Thx PointC! for the superfast solution.

  • Like 3
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.
×