Jump to content
Search Community

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

skiller test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • Solution
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

  • Like 1
Link to comment
Share on other sites

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!

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.
×
×
  • Create New...