Transfrom Rotate 360 Glitch

[Ali Farooq]

Hi,

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!

Ali

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

[PointC]

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.

[Ali Farooq]

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