Trigger animation on hover when available

[Mike H D]

Hi,

 

I have a little card flip animation set up, which is working well when triggered by a click. I have attached a codepen link to this.

 

I now need to have the animation trigger on hover, but only when hover is available on the device being used, otherwise it should default back to triggering on a click. What is the best way to achieve this in GSAP?

Thanks for any help or pointers anyone can offer

See the Pen xxNLoBp by MikeHarrisonDesign (@MikeHarrisonDesign) on CodePen

[Cassie]

Hey!

You're not really dealing with hover as you're in JS land, so "hover" is mouseenter and mouseleave events

You could try something like this?

See the Pen wvbrvqO?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Quote

 

Worth noting that it's not all completely cut and dry when it comes to detecting which devices are touch devices, and which have a mouse as some devices can have touchscreen and a mouse, some only touchscreen etc.

You can read threads like this to grasp a little of the headache.
https://stackoverflow.com/questions/39474904/how-to-identify-if-a-mouseover-event-object-came-from-a-touchscreen-touch

 

 

FYI

If you're using ScrollTrigger there's a handy util to find out if your user is on a touch device
https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isTouch/

[Mike H D]

Thanks for getting back to me Cassie, that is a huge help. I have had a read on detecting touch devices, and it is definitely a sticky subject! But I think what I have now will work fine.

 

Thanks again for your help.