GSAP Draggable Carousel bounds not working properly on mobile

[mrmikelee]

Hi I'm hoping for some help with this Draggable carousel I've created. I made a simplified Codepen to show the basic build of the section. I'm still fairly new to GSAP and especially the Draggable plugin so any help here would be greatly appreciated.

The issue I'm coming across is that the carousel works as intended on Desktop (I'm using Chrome). It follows the bounds container. But on mobile, it won't let me drag through the carousel at all. It hits the beginning bounds edge and won't move. Since the first element of the carousel lines up with the edge of the bounds container it just won't scroll at all. I've tried a number of different methods to fix this with my limited understanding including trying minX and maxX which does allow it to start scrolling but then the carousel scrolls off the page and disappears.

If you'd like to see it in full context you can look at that section of the webpage here: https://awardco.webflow.io/recognize-awards/home#past-winners but I'm hoping the Codepen will be enough.

See the Pen YzowBQL by mikelee22 (@mikelee22) on CodePen.

[mvaneijgen]

Hi @mrmikelee welcome to the forum and thanks for being a club member! 

 

I've tested your pen in the debug view on iOS and it seems to work perfectly fine, but indeed you 'live' site doesn't work. Sadly we can't help you debug a live website, there is just no way to modify the code, but there is something on your live website interfering with the setup that in the codepen isn't. My advise start disabling big chunks of code to see if the issue goes away and then slowly start introducing small things back in, until the issue is back, that is the easiest way to find the culprit. Hope it helps and happy tweening! 

 

 

[mrmikelee]

Yeah I totally understand not being able to help with debugging the 'live' site.  I appreciate you checking it out though and letting me know that it isn't anything with the code of the draggable carousel itself. Now I can start looking for the culprit elsewhere. 

Thanks @mvaneijgen!

[Rodrigo]

Hi,

 

Is worth noticing that your production site has many warnings and a few errors, the problem you're seeing could stem from one or more of those, so it would be a good idea to check them just in case.

 

Happy Tweening!