Autorotate on a motion path causing alignment issues

[Key Parker]

Hi,

 

I am trying to animate a shape along a motionpath bezier. In my codepen have taken it back to basics with a line and a square.

Whenever I switch autorotate to true, the square just does not stay centred on the line.

Turn autorotate to false and it sticks beautifully. But I need that auto rotation goodness.

 

I have been using the demo from https://greensock.com/docs/Plugins/MorphSVGPlugin 'Animate along an SVG path' for the basis of the animation.

See the Pen VWEwRa?editors=1010 by freemagee (@freemagee) on CodePen

[OSUblake]

You need to change the alignment of your square FIRST.

See the Pen awROaG?editors=0010 by osublake (@osublake) on CodePen

 

[Key Parker]

That is fantastic.

 

I have applied what you have to pointed out to my 'real' animation.

You have made a random stranger very happy on a Saturday afternoon.

 

Thank you.

 

See the Pen weEYma by freemagee (@freemagee) on CodePen