Jump to content


Cog/Gear (more complex than expected) Rotation Anim

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Good morning, or good afternoon, or good evening… Hello guys! :D


I'm working on a cog rotation animation for the (under development) store of my website.

You can see it on the top right corner of the attached image.

If I was not so perfectionist, I would have been done with it since two days…

Sadly (for me), I too often —love— to fine tune things… so I would like my rotation animation to be as precise as I expect.


I've made a Codepen which so far (at about 90%) shows exactly the kind of animation I would like.

However, I'm quite a newbie to GSAP and I've the feeling my actual code could be way overthought.

I made a bulle list to try to explain you the animation process and would much appreciate if you could tell me is there is a way to simplify / rethink it. I also miss the TODO point.


Thanks in advance for your time,





See the Pen wJpaZG by Tazintosh (@Tazintosh) on CodePen

Link to comment
Share on other sites

Hi tazintosh.


First, Thanks for the demo and for providing instructions on how to interact with it.


I've looked this over a few times and I'm really struggling to understand it all. It's very complicated in the way it needs to react differently with each mouse over / out and click. 


I feel like before I can even begin to see how GSAP can be used to solve the issue I have to spend an hour or more figuring out what exactly the issue is. Whatever the issue is I think that 95% of relates to general programming structure and logic and very little related to GSAP.


Although I know Im missing a few pieces to this puzzle, my gut tells me that whenever you are responding in so many different ways to various user interactions at different times, it is VERY difficult to come up with a solution that involves putting all possible tweens into a timeline. My guess is that you go away from creating tweens A-F and putting them in a timeline and focus on generating the proper tween based on what interaction the user is taking and when. In other words create your animations when you need them. Don't rely of pre-existing animations. 


If you can provide some more context or a better description of why this dial needs to spin this way, perhaps I or one of the other experts will have a clearer solution for you. It would help a little to comment the code and perhaps give the animations clearer names. When I read the instructions that said:


Mouseover and mouseout should not trigger any tween if tweenB or tweenE are running.


I didn't know what tweenB or tweenE were or how they differed from tweenA or tweenC. When I saw them defined in the code it became too complicated to understand how and when they were triggered. 


I know you said you're were new to GSAP. That's fine. I don't mean to be critical of the code, just trying to explain that the way things are set up make it pretty difficult to understand. Even with my partial understanding of how I think you might want this to work, I think it would be a challenge to pull off for even more advanced developers. 

  • Like 3
Link to comment
Share on other sites

Hello Tazintosh


Have you tried using mouseenter and mouseleave instead of mouseover and mouseout?


In my opinion, this looks like a event binding issue and not a GSAP issue. If you want full control of when you enter or when you leave an element, it is better to use mouseleave and mouseenter , since they dont bubble down the DOM.


event bubbling: https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles


This way you use events that do not use event bubbling to cause unwanted triggers of child elements you might be hovering over. Since mouseover and mouseout trigger event bubbling even when triggering over the binded events child.


In your case its better to use mouseenter and mouseleave so the hover events do not get triggered even if a child element is hovered over or out. And then you know that only if and when you enter or leave the binded element.. it will only fire the event for that binded element and not its children as well.


mouseeneter: https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter


mouseleave: https://developer.mozilla.org/en-US/docs/Web/Events/mouseleave


If you dont use mouseleave or mouseneter then you should be using event.stopPropagation to prevent bubbling.


stopPropagation: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation



  • Like 3
Link to comment
Share on other sites

Hi Carl and Jonathan.


Thank you for your long time writing those answer.

I'll definitely switch to enter/leave for the mouse, it's quite smart.

About the fact it usually "relates to general programming structure and logic", I cannot be more agree : ) My job is about visuals thingy, and I'm autodidact on programming.

Handling everything in separate tween is probably also a valid points, I can see it now… what is sad, is that I first fully started this way ^^ and recode everything thinking the timeline could be a smarter and much cleaner solution for the need :(


I have to switch projects for now, but definitely continue asap.

Thanks again.



Link to comment
Share on other sites

Hi folks!


I made it! (by following your recommandations, so thanks)

Here's the updated Codepen. (I've kept the old JS code commented for reference.)

I've also rewrote the description and added some comments on the code.

There are probably some if/else conditions to optimize.


See the Pen wJpaZG by Tazintosh (@Tazintosh) on CodePen


Thanks again.

  • Like 1
Link to comment
Share on other sites

Just wanted to give you a little pat on the shoulder Tazintosh, well done for working this out.


It's great to see people figuring things out, having that 'ah!' moment after a few pointers.


Keep at it. There's a load of us here who are not programmers by training or profession. I'm an animator myself, never had any programming background before GSAP. :)

  • Like 4
Link to comment
Share on other sites

Glad you got it worked out, Happy Tweening! :)

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.