Jump to content
GreenSock

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

Off-Topic: Detect swipe-like gestures on trackpads

Recommended Posts

Love the input of this community so much, that I dare to make a completely non-gsap-related thread. Feel free to delete it, if this may be inappropriate. 

 

I have to do a lot of "Snap-Scroll-esc" things; meaning: full width & full height panels, that listen to "swipes". Like fullPage.js or OnePage Scroll for instance. Of course, the animations we use are way more sophisticated. So all I need are the gestures for trackpads. I tried to extract them out of the code.. but.. failed horribly.

 

I then found lethargy.js, which is used by smartscroll but can luckily be used independently. 

 

When you look at these solutions and use them with a trackpad, you notice that there is a rather heavy timeout until your swipe is recognized again. 

As you can see in this Demo, you have to use some sort of throttling or debouncing to fire only one event per user-input. This throttle/debounce timeout is part of a tricky split with lethargy's sensitivity (the green line in the demo, as I understand it) – if the line is too low, you need a very long timeout to prevent false positives; if it is too high, you risk getting false negatives.  

 

It appears this doesn't pose a problem on touch devices. For these I use Ben Majors jquery.touch-events, which works beautifully.

 

I fiddled with the three lethargy-parameters the best I could, and haven't accomplished robust results under 650ms delays, which is way too high for my taste. All the fancy animations lose in value, when the user doesn't feel in control and is confused / figuring out when he can and cannot interact with the page.

 

Much text for a simple question:

How do you guys handle trackpad swipe events; have you found a way to fire multiple "correct events" without timeouts?

Link to comment
Share on other sites

I'm not familiar with those libraries, but gestures are really hard because they are usually device specific. You have to make a bunch of assumptions about what's going on. 

 

Have you tried hammer.js? That has pretty good support for gestures.

http://hammerjs.github.io/

 

Here's another good source using Pointer Events.

https://patrickhlauke.github.io/touch/

 

At the moment Safari is the only browser that doesn't support Pointer Events, but that can be polyfilled.

https://github.com/jquery/PEP

 

I linked to this article in another post of yours, but it shows how passive event listeners can improve performance.

https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/#IEiqEedYUtyPIBFX.97

 

 

And here's a really simple example of how Draggable could be used to detect swipes. It uses velocity instead of something like a timeout.

 

See the Pen NdzWKw by osublake (@osublake) on CodePen

 

 

 

 

  • Like 4
Link to comment
Share on other sites

Speedy Gonblakez– Insane!

 

I'm excited to go through your links, thank you very much!

 

Nice solution with draggable, unfortunately it has to be without clicking, just scrolling-style.

It looks like hammer.js is also focused on clickdrag-related solution :'(

 

 

EDIT: I also don't see how pointer-events can help me here, since the pointer isn't doing anything when you use the trackpad to perform scroll. Maybe there is a misunderstanding: I need a "swipe-like-detection" on trackpads, where the user scrolls with two fingers like he would normally do. Since I am in an environment where all panels are positioned fixed top left with width and height 100%, there is no actual scrolling happening.

 

Link to comment
Share on other sites

Yeah, the draggable example will only work for a mouse/touch events.

 

A touchpad scroll gesture should fire a scroll event, well it does on my computer. But hammer does support scroll events. 

Link to comment
Share on other sites

The pointer event might not be used for the actual gesture event. It could be used to detect the start of a gesture, and how many fingers are being used. It's a really complicated topic because of differences in the device and browser being used. Nothing is really standardized.

 

I looked at the some of the examples in the link I provided for the pointer events, and noticed something I've never seen before, a gesture event. It looks like it is something that is only supported in Safari browsers.

https://developer.apple.com/documentation/webkitjs/gestureevent

 

 

  • Like 3
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.
×