Jump to content

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

Bezier plugin autoRotate doesn't follow path

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi, I'm trying to get an object to follow a given path and autoRotate but it doesn't seem to quite work.


It works ok when autoRotate is false, in that the top left corner of the blue box follows the path exactly, but when I enable autoRotate it drifts.  


Could it be something to do tithe the transformOrigin?  I tried adding transformOrigin: 50% 50% to the tween but it had no effect.


Anyone have any ideas what's wrong?


Many thanks



See the Pen bVZWqe by anon (@anon) on CodePen

Link to comment
Share on other sites

Hello deejbee,


I'm not near my computer right now but have you looked at the GSAP BezierPlugin Docs regarding autoRotate?




Taken from BezierPlugin Docs:

  • autoRotate : Boolean, Number, or Array (default:false) - to automatically rotate the target according to its position on the Bezier path, you can use the autoRotate feature. If your Bezier is affecting the "x" and "y" (or "left" and "top") properties of your target and you don't need to offset the rotation by a certain amount more than normal, then you can simply setautoRotate:true. Or if you want to offset the rotation by a certain amount (in degrees), you can define a number like autoRotate:90 (adding 90 degrees in this example). Or for more advanced controls, you can define autoRotate as an array. In order to adjust a rotation property accurately, the plugin needs 5 pieces of information:

    The autoRotate property should be an Array containing these values, like ["x","y","rotation",90*Math.PI/180,true]. And if you need to affect multiple rotational properties (like in 3D tweens where the Bezier is going through x,y,z points which could affect rotationX, rotationY, and rotationZ), you can use an array of arrays, like["x","y","rotationZ",0,false], ["z","x","rotationY",0,false], ["z","y","rotationX",0,false].

    1. Position property 1 (typically "x" or "left")
    2. Position property 2 (typically "y" or "top")
    3. Rotational property (typically "rotation")
    4. Number of degrees (or radians) to add to the new rotation (optional - makes it easy to orient your target properly)
    5. Boolean value indicating whether or not the rotational property should be defined in radians rather than degrees (default is false which results in degrees)


  • Like 1
Link to comment
Share on other sites

I have read the docs for autoRotate, but it doesn't seem to make a difference.


The angle of rotation seems to be right (using the tangent to the curve), its just the positioning offset that looks wrong as it moves along the path, until it reaches the first straight but then drifts again after that section.

Link to comment
Share on other sites

  • Solution

Since you are using position absolute with top and left at 0. You need to set the margin-left and the margin-top to a negative of half their width and height.


Set the margin-left -25px (half of the width) and the margin-top -25px (half of the height) in your CSS for the #div1 rule


See the Pen WQmOpJ by jonathan (@jonathan) on CodePen


Check lines 13 and 14 in the CSS panel of the above codepen.


This is an old CSS trick for when you need to center absolutely positioned elements horizontally and vertically.



  • 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.