rotateY problem

[mbower]

Hi,

 

I’m new to GSAP, and am enjoying learning how to use it. It's a great tool.

 

I am however running into a problem. I have a layout which is comprised of a number of hexagons arranged in a grid.  I want to be able to hover over each hexagon, rotate its Y axis through 180 degrees to flip it and display the content on the underside, then mouse off for it to revert to a Y rotation of 0. I have largely achieved this using the code below, however if I mouse off a hexagon too quickly, the mouse leave / mouse out event is not fired and so the hexagon stays with its underside showing.  

 

My jquery / gsap knowledge is fairly rudimentary. How can the code be improved to always ensure that a hexagon returns to it's correct state?

 

Any help appreciated - thanks.

    

See the Pen wmJwqx by bowowow (@bowowow) on CodePen

[Visual-Q]

jQuery hover may be a better solution for what you need.

 

https://api.jquery.com/hover/

 

See discussions below showing use of .hover

and here's a card flip using .hover

 

 

 

 

 

[mbower]

Thanks very much - I'll take a look.

[PointC]

Hi @mbower

 

Welcome to the GreenSock forum.

 

Looks like you're getting some elements stuck with rapid hovering. If it were me, I'd create a timeline for each element and play/reverse on hover. That way nothing can get stuck in the 'back' position. Something like this:

 

See the Pen ZxeQBx by PointC (@PointC) on CodePen

 

You'll also see that I added a .trigger class around each of your rotating containers. I did that because each of the rotating containers was the trigger and if you moved the mouse during the rotation, it would sometimes no longer be over the element and trigger the reverse. By adding a trigger div that isn't part of the actual rotation, the mouse is always over the target element throughout the rotation even if you move it a bit. I don't know if that's what you'll want to do in your final project, but it's just an idea.

 

Hopefully that helps. Happy tweening.

 

[mbower]

Hi @PointC,

 

Thanks very much for that, really appreciate your help! I understand your solution, and it works perfectly. I like the idea of a trigger container - seems quite straightforward in hindsight but I'd probably never have thought of it

 

Thanks also @Visual-Q for your reply. 

 

Cheers guys.