Draggable: Detect when draggable is at a snap-point

[thei]

I have a basic slider using Draggable.

I want to be able to do something (play a sound) when each item in the slider crosses its snap-point. That is, as I drag it, when each slider circle is centred in the middle black circle, the slider should go "click" - so dragging it from one end to the other would go "click click click click" etc., one click each time a coloured circle is centred inside the black circle.

I know how to play sounds etc, the question is - how do I reliably and efficiently detect when the coloured circle is inside the black circle (that is, when the draggable is at a snap-point)?

See the Pen GRzBaQv by nedmartin (@nedmartin) on CodePen

[Rodrigo]

Hi,

 

You can use the Directional Snap Helper Function:

https://gsap.com/docs/v3/HelperFunctions/helpers/getDirectionalSnapFunc/

 

But you'll have to come out with your own custom logic in order to get the right direction on every drag update.

 

This is super easy to achieve with the Inertia Plugin using Draggable's getDirection method:

https://gsap.com/docs/v3/Plugins/Draggable/getDirection()/

 

Hopefully this helps.

Happy Tweening!

[thei]

I don't understand how knowing what direction my carousel is dragged helps me know when a circle within the carousel (a slide, essentially) is overlapping the target circle.

 

I don't want to know when it's finished dragging - I want to know as each circle is dragged. For example, if someone were to drag the carousel from 1 through 8, stopping on 8, it should make 7 clicks, as each circle crosses the target circle. Effectively simulating the common haptic feedback effect you see on things like this.

[GreenSock]

You mean like this?: 

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

[thei]

That seems to work on slow dragging, but not on fast dragging or on inertial-throwing (or possibly my fast dragging is getting confused with inertial-throwing, it's difficult to tell)

I'm assuming onDrag throttles itself in some manner when it's getting a lot of events quickly?

This gives it a very inconsistent and faulty sort of feel when it sometimes goes click and sometimes doesn't (it's much worse in my actual implementation, which has wider slides that slide a lot further, which seems to tend to use intertial throwing more heavily)

[GreenSock]

Oh, if you want it to happen during the throw (inertia), you can just run the same logic in an onThrowUpdate.  I updated the demo accordingly.

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

 

As for being "inconsistent", I wonder if you're just misunderstanding how this works. Every time it drags (and yes, it's debounced to every requestAnimationFrame because it'd be wasteful to have things fire when there are no updates to the screen), it checks to see if the current position's closest snapping spot is different than the previous one (so it moved far enough to be at a new slot) and if so, it fires that console.log(). 

 

If you drag super fast, it would of course be possible to have the very next update be 2 or 3 or more slots over from the last one. For example, if each slot is 50px apart, and you start at 0 and drag super fast such that the very next update is at 150px, that's the one that it'd fire (so it'd skip the 100px one). 

 

If you want it to potentially call MULTIPLE things on a single update (like all the ones inbetween where it was last and where it is now), you could certainly adjust the logic to accommodate that. I just figured you wouldn't want multiple to fire on the same tick. 

[thei]

That works nicely.
The "inconsistency" I was seeing was due to the inertia plugin and not having an onThrowUpdate. Now that it's updating on drag and throw it seems to work well.
Thanks!