Gsap drag "snap" first item issues

[ceindeg]

Hey

 

So having fun with Draggable, but experiencing issues with my snapping - specifically snapping to the first item. 

 

So, if you drag nice and slowly between items it snaps nicely between them, slowing to a stop. However, if you drag hard/quickly and release it "bounces" off the bounds and ends up on the second one instead of landing on the first one. I know the issue is with my settings but I'm not entirely sure which one to target to stop the issue. I've been playing around for hours and not getting very far so if anyone can point me in the right direction I'd be very grateful. 

 

Also, I'd really like to stop "reverse" snapping - i.e. if the user was dragging left it should snap to the next left one rather than reversing direction (even if the one on the right was technically closer). 

 

Here's the codepen

 

and a video of me demo-ing the issue with the codepen

https://youtu.be/VGX_R40FVZA

 

Thanks!

See the Pen jOEOBzY by clkdigital (@clkdigital) on CodePen

[ZachSaucier]

Hey ceindeg and thanks for posting. 

 

@GreenSock it seems adding a minDuration makes the animation more bouncy over the bounds, seemingly make overshootTolerance less applicable - looks like a bug.

 

Demo using v2: 

See the Pen bGNGrzY?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Demo using v3:

See the Pen yLyLoZx?editors=0010 by GreenSock (@GreenSock) on CodePen

[ceindeg]

Hi @ZachSaucier thanks for the reply - I'm not exactly sure how that would apply to my codepen? Is this a fix your suggesting?

 

Also, if you try out my codepen on a mobile (my android) it's actually quite difficult to get back to the first slide sometimes. It just bounces back to the second one. I don't have a screen recorder on my mobile to show you, but it seems like the same issue I'm having on desktop.

 

Any ideas for a solution? I think if there's a way of only snapping in the same direction as the user drag that would solve the issue...

 

Thanks

Louisa

[ZachSaucier]

2 hours ago, ceindeg said:

I'm not exactly sure how that would apply to my codepen? Is this a fix your suggesting?

My post above isn't a fix, it's pointing out to Jack that the two versions act pretty drastically different so there's likely some sort of bug happening. 

[ceindeg]

Thanks makes sense. I tried removing minDuration and it has improved things slightly but still bounces away from first slide onto second a lot of the time. 

[GreenSock]

Okay, I think I got it all figured out...

• You had "bounds" set to a container element which imposed an absolute maximum/minimum to the snapping values but if you grabbed it mid-tween there'd be decimal values that, when rounded, might interfere with the snapping. In other words, when it measured the distance of the partially-tweened draggable element to the bounds, it may come up with -0.0000000001 as the MAXIMUM (for bounds) and the closest snapping value would be 0 in your array, but since that's greater than the maximum (-0.000000001), it'd go to the next closest one in the array. That's why it wouldn't go all the way to the first one sometimes. 
• minDuration and overshootTolerance are totally linked. In other words, the overshootTolerance is a way to influence the auto-calculated duration but since you set minDuration it was basically overriding what overshootTolerance was trying to do. I've implemented some logic to force a certain behavior when overshootTolerance is exactly 0, so you should get the behavior you want now. 

If you clear your cache and try again, things should work well now. Does it work better for you? 

[ceindeg]

That's much better thanks!!! 

[GreenSock]

FYI, GSAP 3.0.2 was just released and has these fixes in place. ?