Reversed moving along the path breaks rotations

[whereismymind]

When I do an animation without reverse, the element with auto Rotate true works correctly and rotates as svg path. However, if I set start: 1 end end: 0 (like reverse), then auto Rotate starts to work crookedly. My svg path consists of a single line with several 90 degree rotations. And instead of rotating the element by 90 degrees during animation, it rotates it by -270 degrees in some places of rotation.

See the Pen mdYpoaq by whereismym1nd (@whereismym1nd) on CodePen.

[Rodrigo]

Hi,

 

That is mostly because the CSS transition you have in place. Basically you have a CSS transition that is targeting the same element and properties that GSAP is animating with the MotionPath Plugin. That's just a bad idea as Jack explains in this thread:

What I could suggest is to use an SVG editor (or other vector editor like Illustratator, Boxy, Inkscape, etc) in order to change your corners from hard 90 degrees turns to something with little curve on them in order to smooth that out. On hard corners like that, the rotation change is immediate, adding some curve to it should help.

 

Hopefully this helps.

Happy Tweening!