gareth Posted November 29, 2020 Share Posted November 29, 2020 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 Link to comment Share on other sites More sharing options...
akapowl Posted November 29, 2020 Share Posted November 29, 2020 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 1 Link to comment Share on other sites More sharing options...
gareth Posted November 29, 2020 Author Share Posted November 29, 2020 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 30, 2020 Share Posted November 30, 2020 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now