Jump to content

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

Rotation with Hover

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.