Change snap back / forward point

[gareth]

I have a x draggable with snap points working well, but is it possible to change where the snap is triggered from ? At the moment you have to drag past the central red line in my demo, I would like to trigger the snap forward earlier - 50% from the line.

See the Pen zYKxpMg by garethj (@garethj) on CodePen

[akapowl]

 

Hey @gareth

 

I have close to none experience with the draggable-plugin, so I can not tell you if the exact thing you were asking for is possible, but after a bit of tinkering this is a pretty decent working solution I came up with.

 

I don't think, I am changing 'where the snap is triggered from' per se here, but more like setting the snappoints, so it appears that it is triggered from somewhere else - if that makes sense.

 

Also, I don't know if this is what you meant by 'earlier - 50%' - I made it dependent on the width of the window - in this case -50% of the 50% where the actual snapping trigger is positioned ( thus the window.innerWidth/4 in those calculations ).

 

See the Pen 6517f90e32f0cacae1a453d374c9bc11 by akapowl (@akapowl) on CodePen

 

[gareth]

thanks so much for having a go at this, but I actually meant the amount of drag it takes to go the next snap point.

 

In my demo you will see you have to drag the next div past the red line or it snaps back, I was hoping you could move halfway towards the line and then it would snap forward. 

[ZachSaucier]

Hey gareth. To do this sort of thing you need to use a snap function. I showed how to use it related to ScrollTrigger in a forum post last week here:

 

I'm a bit short on time today so I haven't applied it to your demo but if you have questions please let us know