Jump to content
Search Community

Reversed moving along the path breaks rotations

whereismymind test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites



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!

  • Like 1
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.
  • Create New...