Draggable for dragging and Observer for wheel + touch scroll events?

[skiller]

Hey there,
I'd like to move an element horizontally using wheel and/or drag on desktop and touch and/scroll on mobile.

 

I've set up Draggable for easiest possible scrolling with inertia, and Observer for wheel events.

 

I can sort of update a target value for the element to tween to, but the back-and-forth of the respective x values won't quite work.

 

Any tips?

 

 

Best regards

Constantin

See the Pen RwvebjR by ehrenstein (@ehrenstein) on CodePen

[mvaneijgen]

Hi @skiller

 

I think there are a few things here. I don't really know what route you want to take, but the Observer plugin also fires onDrag if you don't set a specific `type` Default is "wheel,touch,pointer". Right now if I drag both Draggable and the Observer plugin fires and this is causing the issue. 

 

So in theory you don't even need Draggable, everything can be done with just the Observer plugin, you'll then need to set your own bounds in the onChange, but that is I think the most simple solution. (see pen below)

 

If you're going to target different devices, you could maybe use gsap.matchMedia() to just load the relevant code (one of the two) on that device, so that you don't have them both fighting for control. Or define only the type you want to target, but I have the feeling that Observer type: "touch" and Draggable are the same thing. (don't quote me on that 😅)

 

Hope this points you in the right direction, happy tweening!

 

See the Pen XWOxWxj?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

[skiller]

Thanks for the hints!

 

The reason I want to include touch as well is that I want the user on mobile to be able to swipe anywhere on the screen – swiping anywhere is supposed to be translated into horizontal values (you know, finding out which direction is the dominant one and mapping that value on the horizontal axis, or even combining the two with cos/sin whiz math and taking the travel distance as horizontal value).

 

So there are similarities, but the differences are important.

 

I'd scraped the internet for hints of how to do it and found a few comments à la “if you want to drag something, avoid the hassle and just use Draggable,” especially as hints at how to set up Observer for wheel, touch, scroll events as well as dragging are, well, a little sparse.
So I understand that Draggable and Observer won't play along too well for now… or do you happen to be able point at hints about how to set it up so that a user can choose whether to touch or drag (or both) on mobile or to wheel or drag on desktop, respectively?

 

 

Thanks a bunch in advance.
Constantin

[mvaneijgen]

25 minutes ago, skiller said:

So I understand that Draggable and Observer won't play along too well for now… or do you happen to be able point at hints about how to set it up so that a user can choose whether to touch or drag (or both) on mobile or to wheel or drag on desktop, respectively?

The only thing I can think of is  check if the visitor has click on the Dragable target and then disable Observer or vice versa. 

[GreenSock]

9 hours ago, skiller said:

So I understand that Draggable and Observer won't play along too well for now…

I'm not sure why you'd think that. As far as I can tell, you're just wrestling with some logic stuff. Is this what you're trying to do?: 

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

[skiller]

On 11/30/2023 at 9:09 PM, GreenSock said:

I'm not sure why you'd think that. As far as I can tell, you're just wrestling with some logic stuff. Is this what you're trying to do?: 

 

 

Thanks a bunch – yeah, that's about it. I had built it up from scratch and got it working, but I'm definitely seeing a few elegant things here, especially concerning clamping and invalidating.

 

Thanks for your help, y'all!