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

[F.D.C.H]

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
Fabio

 

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

[akapowl]

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

 

 

 

Edit:

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

 

[F.D.C.H]

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!  

[akapowl]

 

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!