GSAP Slider Snap & Interia on Mobile

[james12345]

Hi Guys,

I have a slider here, on desktop autoscrolls, scrubs through on scroll, is draggable & also works with next & prev buttons, but want it to be much simpler on mobile—just draggable and snappable to center. All's working well on desktop, however on mobile the Interia goes crazy and swipes through. I just wasn't sure where I was going wrong with the interia and snap.

It's a bit of an amalgamation of a couple of found sliders so could potentially be simplified and tided, but any point in the right direction for interia, draggable and snap would be great.

Appreciate the help guys

See the Pen QWzogwR by jamesstudiothis (@jamesstudiothis) on CodePen

[Rodrigo]

Hi,

 

Maybe you can give the Horizontal Endless Loop a try:

https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/

 

Here is an example that uses Draggable and Inertia Plugin:

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

 

With that you can use the breakpoint in your setup to play/pause the timeline returned by the helper function.

 

Hopefully this helps.

Happy Tweening!