Rotation with Hover – Help

[lewis712]

I have the following code:

https://codepen.io/gtdesign/pen/JKGmeO

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.

Any help would be appreciated.
Thanks,
Andy

[lewis712]

Could anyone possibly help?

Thanks,
Andy

[amanda_]

I just took a quick look, can’t make a demo right now, but one thing you could do is attach and remove a class on hover, and the rotation triggered by that class.

[lewis712]

When you have a free moment, can you help me with that? I’m struggling as it is with javascript, ugh.

Andy

[amanda_]

Actually I think you might be better using greensock or another animation library.

With the add and remove class it resets the rotation. I did a quick attempt here, and you’ll see it doesn’t interact with the css timeline. I think you’ll need to do your animation in js. I never use css animations, so I am not sure what limitations they have, but you would be able to achieve this with greensock with relative ease.

http://codepen.io/ald603/pen/NrrBjQ?editors=1010

[lewis712]

I’m not at all familiar with Greensock so it’d basically mean I’d have to start over. Would what I have created be easy to recreate in greensock?

[amanda_]

Here you go, I started it for you.

http://codepen.io/ald603/pen/NrrBjQ

[bearhead]

I would just use animation-play-state:
http://codepen.io/kvana/pen/QEEJjX

[amanda_]

Ah, that looks good. I always reach for greensock because it’s easy to use. But if there’s a pure css solution, might as well go for that if it works in all the browsers.

[lewis712]

That’s awesome that you got it working. When I put it on my page, i can’t get the stop feature to work, it just keeps rotating.

http://gtconcepts.co/br/

Andy

[bearhead]

You need to wrap the contents of the rotate.js file in a document.ready function. (I updated my pen)

[Author]

Posts