Jump to content


Rotation with Hover

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

I created the following animation using css/javascript, but was told that it would be easier to achieve what I need done with Greensock. 


See the Pen JKGmeO by gtdesign (@gtdesign) on CodePen


I would like help in seeing if there is a way to hover over one of the circles, say for instance “Gutters” that the rotation stops and the “Gutters” circle gets larger and changes color.  Can all of this be done using GSAP?


Thanks for any help,


Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Sure, this can definitely be done in GSAP and you will get a ton more control and flexibility than if you stick with CSS.


Check out this HTML5 ferris wheel: http://codepen.io/GreenSock/pen/wBbKs


Notice how you can play, pause, reverse, scrub and adjust the speed (second slider).


We typically don't just build complex working examples but I had something similar laying around and added the "rollover to pause and scale" functionality.

The basic idea is that each animation of each box spinning is put into a timeline. Mouseover the box to pause the timeline and scale up the box you mouseovered.




*note: you can hide the red ".arm" elements. they are they to illustrate how the boxes are nested in them.


Definitely check out the Getting Started video: http://greensock.com/get-started-js

And read about timelines: http://greensock.com/timelinelite

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