drag, snap, scroll and more

[benoit]

Hi,

I know how to snap and make a modulo on a draggable element, but for no-touch device, a "fake scroll" looks a better idea.
How to make it (draggable update ?) ?

See the Pen aamypq?editors=0111 by benoitwimart (@benoitwimart) on CodePen

[GreenSock]

Hi @benoit. I read your question several times and I still don't understand what exactly you're asking. Can you offer more details? How can we help? 

[benoit]

Sorry jack @GreenSock

For an interface, I made a draggable element (like a slide) and I think it's more easy to move the slide with a trackpad gesture so I try to combine the drag and the scroll…
Now the last step is to deal with snap and throw.

 

See the Pen VGmzMG?editors=1111 by benoitwimart (@benoitwimart) on CodePen

 

[Carl]

As I understand it this could be a bit tricky or messy.

 

The key to getting the scrollY of the window to effect the movement of the box is to use ThrowPropsPlugin.track() method to track the velocity of the scrolling.

When the user is done scrolling you can create a tween of the box based on the velocity of the scrolling.

 

Definitely study the ThrowPropsPlugin docs: https://greensock.com/docs/Plugins/ThrowPropsPlugin 

and the track() method: https://greensock.com/docs/Plugins/ThrowPropsPlugin/static.track()

 

Here is a very rough implementation that will allow you to gently use a trackpad to move the red box.

 

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

 

I suspect you will need to do some work to update the Draggable and prevent things from getting too crazy. Right now its very easy to throw the thing very far. Also if you grab the vertical scrollbar and move it nothing very good happens.

 

 

Unfortunately this isn't the type of thing I can spend hours on working out all the kinks. Hopefully this is enough to at least spark some ideas about what is possible with the API

 

 

 

[benoit]

wow