Jump to content

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

Transfrom Rotate 360 Glitch

Recommended Posts


I've encountered a small bug relating to the rotation property. As you can see in my codenpen I'm rotating a single Gear in the SVG. It is being animated to 360 degrees and is repeating indefinitely. The behavior is as expected except the fact that if you observe carefully, there is a slight jerk/glitch/delay whatever you call it, in the animation. It becomes more noticeable as we slow down the animation. I swear I saw a post regarding this bug on this forum some time ago but now I can't find that post that's why I'm asking again.

Is there any way this can be fixed? Any help would be really appreciated.

Many Thanks!


See the Pen xLQLNW?editors=1000 by Ali_Farooq_ (@Ali_Farooq_) on CodePen

Link to comment
Share on other sites

Hi @Ali Farooq :)


I think you have a slight rotation on that gear so the tween shows that little adjustment on each repeat since you're animating from exactly 360. Please try animating from a relative 360 like this:


TweenMax.from(mainGear, 4, {rotation:"+=360", transformOrigin:"50% 50%", ease:Linear.easeNone,repeat:-1});


Hopefully that helps. Happy tweening.


  • Like 6
Link to comment
Share on other sites

Nice! I didn't take into account the slight rotation being applied and how it would affect the gear animation. Thanks a bunch!

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