Jump to content
GreenSock

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

How to Simulate Dragging a Draggable with a Trackpad?

Recommended Posts

I thought this was a pretty straightforward question, so I didn't make a demo. Lmk if it would help.

 

Anyways, I'm wondering if there is any recommended way to simulate dragging a draggable with throwprops+snaps using two-finger scrolling on a laptop trackpad. I don't want gesture detection, but instead want to real time control of the draggable, just like how it would be if you were to drag on a mobile device.

 

So far the only method I've thought of is to directly read the scroll event and use those values to create a throwprops tween and update the draggable at some point so that the snap settings take effect. I'd also have to figure out how to cut off scroll values created by any client side inertial scrolling shenanigans.Later on I'd also want to figure something out for a standard mousewheel  as well.

 

I know the easy way would just be to use scroll-jacking, but that makes for a terrible user experience. Any ideas?

Link to comment
Share on other sites

I read your post a few times and I must admit I'm fuzzy on exactly what you're after, so a demo would indeed help. 

 

Are you saying that the user's computer would be sending scroll events (two-finger swiping?) and you want to somehow cancel the default behavior those trigger and instead leverage them to tell the Draggable to move/translate instead, complete with momentum and snapping? That certainly doesn't sound like an easy feat to me, sorry. It's tricky because Mouse/Touch/Pointer events are pretty critical in the whole Draggable interaction, and those can't be effectively "faked" because of security issues in many browsers. They don't allow trusted events like that to be fabricated as far as I know. You could certainly build something that does all the work of moving the element while the user is swiping/dragging and have ThrowPropsPlugin track the velocity, and then you could fire off a throwProps tween easily when they release their mouse/pointer/finger, complete with snapping.

  • Like 3
Link to comment
Share on other sites

40 minutes ago, GreenSock said:

I read your post a few times and I must admit I'm fuzzy on exactly what you're after, so a demo would indeed help. 

 

Are you saying that the user's computer would be sending scroll events (two-finger swiping?) and you want to somehow cancel the default behavior those trigger and instead leverage them to tell the Draggable to move/translate instead, complete with momentum and snapping? That certainly doesn't sound like an easy feat to me, sorry. It's tricky because Mouse/Touch/Pointer events are pretty critical in the whole Draggable interaction, and those can't be effectively "faked" because of security issues in many browsers. They don't allow trusted events like that to be fabricated as far as I know. You could certainly build something that does all the work of moving the element while the user is swiping/dragging and have ThrowPropsPlugin track the velocity, and then you could fire off a throwProps tween easily when they release their mouse/pointer/finger, complete with snapping.

 

Yeah sorry, not the best with words haha.

 

http://draggable.impaction.cc/       (Just for illustration, no source code. Use chrome / chrome mobile)

 

It's a basic card flick setup, so you can flick the screen up and down, and the draggable will do the rest.

 

On mobile it's not a problem, since you would flicking with your fingers anyways, but on desktop you would have to click and drag, which is unnatural. What I want to do is to allow the user to use two finger scrolling on their trackpad to emulate the flicking experience. Imagine your monitor built into the touchpad; you would just use your fingers to flick just as you would on mobile. Am I making any sense?

 

My current plan is to just read the scroll event and use those values for translateY( ), and then finally fire a throwprops tween at the end.

Link to comment
Share on other sites

11 hours ago, SerpentEagle said:

My current plan is to just read the scroll event and use those values for translateY( ), and then finally fire a throwprops tween at the end.

 

Yeah, that sounds about right to me. 

Link to comment
Share on other sites

2 hours ago, GreenSock said:

 

Yeah, that sounds about right to me. 

Cool, I'll leave an update once I get it to work.

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.
×