Draggable on Mousewheel/Idle

[samwatts1988]

Hello! I've been using the Draggable and Inertia plugins for the first time recently and they've been fantastic to work with. One thing I'm having a bit of trouble getting my head around though is whether or not there's a way that the Draggable behaviour can be triggered using the mousewheel, as well through the click and drag behaviour. 

 

I've read a few notes across various threads that seem to suggest using a proxy as the best way to achieving this, but I'm unsure as to whether that is definitively the correct approach for this behaviour - so I'd be really grateful if anybody is able to suggest whether this (or any other approach) is the best way for achieving this. 

 

I'm also hoping to implement a very gentle level of movement on the canvas when the mouse is idle which would then be continued by the mousewheel or click and drag behaviours. However, I'm assuming this would potentially impact the mousewheel/click and drag invoked Draggable behaviours as any movement when the mouse is idle would be affecting translate values?  

 

I've included a CodePen below just to outline the overall effect we're going for, which is an infinite grid (happy to slim the code down further if needed but for the moment I didn't want to remove too much in case it affects any potential approaches, given the various moving parts of what I'm hoping to achieve!). 

 

I'll be really grateful for any advice anyone is able to provide. Thank you! :) 

 

 

See the Pen XWoXaZd by samwatts1988 (@samwatts1988) on CodePen

[Rodrigo]

Hi,

 

For the mouse wheel event I would use the Observer Plugin:

https://greensock.com/docs/v3/Plugins/Observer

 

As for the mouse idle animation I don't see how this could impact any of the events/gestures you want to use. You can easily create a setTimeout or a delayed call in the mouse move event and restart it on every event. You can use the onThrowComplete callback from the Inertia Plugin. Then create a GSAP instance that moves the canvas if the mouse is idle. Then you can use the onPress callback in Draggable or the onWheel event in observer to just kill that instance. The real challenge becomes making everything work in a relative way, that is the instance that moves the canvas when the mouse is idle should use the current position as the starting point and animate it in a specific speed (amount of pixels on the X and Y axis per second). You seem to have a very solid logic in your example (I don't have time to go through all the specifics though) so I would tap on the function you're using for the Draggable update callback to move the grid around with the mouse idle animation.

 

Hopefully this helps. If you have further questions, indeed simplifying the demo would be great to tackle just the specific issue at hand for that particular case.

Happy Tweening!

[samwatts1988]

Hi Rodrigo, 

 

Thanks so much for your help here - this is really useful and I appreciate the notes you've provided above with regards to how best to go about tackling this. 

 

I've just been having a play around with the Observer plugin and I'm able to pick up the up/down/left/right events from the mousewheel by using this, but I think I'm getting confused when it comes to actually updating the Draggable instance. If I'm right it looks like you can capture the event information and read that on to the Draggable instance? (I'm assuming it would also include the use of the Inertia settings by default when it updates the instance?)

 

I've created a new CodePen below and I've attempted to strip out some of the surplus code there for this example. On line 210 I'm now assigning the Draggable instance to a variable, and then lines 232-251 I'm attempting to update the Draggable instance. Should I be passing the event into the .update() method at this point? (I've tried both passing the event data and passing nothing but neither seemed to work successfully, and I've also tried passing this into .startDrag() and .enable(), but I'm pretty sure I'm just misunderstanding something somewhere along the lines in the docs!). 

 

See the Pen yLGONBY by samwatts1988 (@samwatts1988) on CodePen

 

Thanks so much again for your time and help here. 

 

Best wishes, 

 

Sam

[Rodrigo]

Hi,

 

You have some errors in the way you're using Observer's callbacks. You use them to animate the element and then once those animations are completed you update your Draggable instance:

See the Pen dywMYxM by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!