Jump to content
GreenSock

gareth

Change snap back / forward point

Recommended Posts

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

 

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

 

  • Like 1
Link to comment
Share on other sites

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

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 :) 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×