Bezier plugin autoRotate doesn't follow path

[Guest]

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

[Jonathan]

Hello deejbee,

 

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

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/BezierPlugin/

 

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)

[Guest]

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.

[Jonathan]

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.

 

[Guest]

oh man, I think you just saved my life!