Greensock hover for touch devices

[RhinoRudi]

Hi, Just starting with Greenock and I forked this old menu which I really like. What would be easiest to make this hover work, not necessarily the same way, on a touch device? 

 

Does anyone have a simple way to do a dropdown menu with Greensock for touch?

 

Thanks all,

Randy

See the Pen BEgEYG by RhinoRudi (@RhinoRudi) on CodePen

[PointC]

You could allow a mouseenter and a touch event to trigger the drop-down. The biggest problem with any hover is that detecting touch is not very reliable and there a lot of devices with a mouse and touch screen. I know Blake has complained about sites where his mouse didn't work because it detected his touch screen and turned off mouse events.

 

My own two cents — for drop downs like that I don't use a hover. I drop a little icon on the button to show more is available and the same behavior is applied via a touch or click event. Again, just my opinion. YMMV.

[RhinoRudi]

52 minutes ago, PointC said:

The biggest problem with any hover is that detecting touch is not very reliable and there a lot of devices with a mouse and touch screen

 

I know, I am converting my hover to "Checkbox Hack" in CSS only dropdowns. 

 

So I can use a touch event in Greensock? I have been searching, but looks like not hard enough LOL.

 

Thank you, Craig, I will investigate further. Do you have any dropdowns using Greensock? 

[PointC]

23 minutes ago, RhinoRudi said:

So I can use a touch event in Greensock?

 

You can fire GSAP animations for any kind of event — touch, mouse, scroll, etc. That doesn't really have anything to do with GreenSock. They're all just different event listeners.

 

It's just a matter of setting up the logic for the listener(s). If a click or press shows the sub menu, does the user need to manually close it again? Does it auto close when they click or touch something else? Trying to figure out all the possible user actions and dealing with the multitude of devices can be a bit cumbersome. That's one of the reasons I've given up on hover for anything of importance.

 

I don't have any drop-downs in my CodePen collection, but a forum or Google search should yield some helpful results.

 

Happy tweening.

 

 

[RhinoRudi]

7 minutes ago, PointC said:

You can fire GSAP animations for any kind of event — touch, mouse, scroll, etc. That doesn't really have anything to do with GreenSock. They're all just different event listeners.

 

I was just over reading touch events on W3School. I got it thanks. All good points about trying to figure out how users work. I too am thinking of giving up on hover. I am just working on my first project in years,   I have been mostly in 3D modelling land for the last decade and last time with animation was with a 16mm camera haha!

 

Thanks again, I am off searching. 

[PointC]

ahh.... a fellow 3D animator. Cool. ?

 

If you have any GSAP related questions as you jump back in, we'd be happy to assist. Happy tweening.