Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Draggable & Snap - check if snapped to next or bounces back to old snap

Recommended Posts

Hello everybody, 

i cant finde the right way, so I hope someone can give me a hint. 
I've got a draggable horizontal slider where each slide is a canvas with an animated image sequence – a forward sequence for the active slide & a backward sequence for the leaving slide.

Now I need to figure out, if the slider snaps to the next snapping point or just bounces back to the current one.

appreciate every hint.

Best regards


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

Link to comment
Share on other sites

Hello @F.D.C.H - welcome to the Forums.


You could extend that helper function by a new variable - in the demo below I added startIndex = 0 up top where all the neccessary variables are being set up.


In the draggables onPress you could set the startIndex = curIndex  so at a later point (like on throwcomplete e.g.) you could check wether the value of the new curIndex is equal to the value of the startIndex.


From outside the curIndex is accessible via tl.current() and I made the startIndex accessible via tl.dragStart() - but you could of course change the names to whatever you'd like. Of course the tl part here you would have to then exchange with whatever variable you are applying that horizontalLoop helper-function to.


Then from outside you could do something like this. That's just an idea - I hope that will help :) 


loop.draggable.addEventListener("throwcomplete", log);

function log() {
  console.log(loop.dragStart(), loop.current())
  if( loop.dragStart() === loop.current() ) {
    console.log('Same Index')
    gsap.to(document.body, { backgroundColor: '#f00000', overwrite: 'auto' })
  } else {
    console.log('New Index')
    gsap.to(document.body, { backgroundColor: '#111', overwrite: 'auto' })


See the Pen KKQmPxB by akapowl (@akapowl) on CodePen





In this following pen the startIndex is also being set in the toIndex() function, so calling the check will also properly integrate with click on the buttons - and at this point the naming of tl.dragStart() doesn't seem appropriate anymore ;) 


See the Pen zYRwxBd by akapowl (@akapowl) on CodePen


  • Like 4
Link to comment
Share on other sites

Hello @akapowl
thank you very much for your quick answer, I appreciate your help a lot and your time to even optimize it in your edit.

I knew I hat to index the Frames in some way and compare them, but I thought(hoped), that maybe the draggable plugin got any method to do it. 

In the demo i see, that the timelines progress method is used, but unfortunately I don't use any timeline on the draggable slider, I've should have changed the Demo to approach to my code more - sorry, my fault. But I will look tomorrow after some sleep again and i will surley find a way. 

Thank you again and best regards! :) 

Link to comment
Share on other sites


No worries, maybe this will help somebody else in the future.


Everything that is built in to Draggable can be found in the documentation - and it pretty much has all the basics you should need to create things with it - so if something you'd need is not to be found in there, it is very likely that it will require custom logic that is beyond those basic, or will have to be individualized to fit existing custom logic of yours - just like the helper-function in the demo you posted does.


Speaking of 'basics' here does feel a bit odd though, because Draggable has been out there for a long time and like everything made by GreenSock is very refined - but I hope you understand what I mean.


Next time just make sure to include a demo that resembles your scenario a bit better to guarantee you get the best answer possible :)


Happy tweening!


  • 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.