Horizontal scrolling with scrollTrigger and touch screens

[Poney]

Hello there, this is my first time asking here for help. I'm pretty new to GSAP and i've been enjoying it a LOT this far !

So here is my problem : i'm trying to use a timeline with scrolltrigger. The goal is to animate a pinned section with horizontal: true.
The code works on desktop, but as soon as I switch to a touch screen in the inspector, it breaks. My section is no longer pinned and gets off screen as soon as i start scrolling (by dragging my mouse as i would with a finger).
This issue does not happen when horizontal is set to false.

I've created a codepen but the issue doesn't seem to be happening on it, so here's a gif demonstrating the issue : https://ibb.co/CHmxrj2

Does anybody have an idea of what could cause this ? Thanks !

See the Pen VwypbqJ by vflebus (@vflebus) on CodePen

[GreenSock]

Welcome to the forums, @Poney. 

 

Your CodePen seems to be working properly (as you said). It's very difficult to troubleshoot blind and just guess at what the issue might be in your other site. My guess is it's a CSS issue. Maybe it's not scrollable horizontally on the mobile version of your site due to overflow-x: hidden or something? 

 

For what it's worth, I find horizontally scrolling sites very annoying. It's much more common to have vertical scrolling, but you can still have the animation move horizontally. That way, people can use their mouse wheel, plus it's just more intuitive for most people to scroll vertically. There are many examples of this effect at https://greensock.com/st-demos

 

If you still need help, please provide a minimal demo that clearly shows the issue and we'd be happy to take a peek. 

 

Good luck!

[Poney]

Thank you for your reply !
So the thing with that codepen is that it works.. In codepen only. This is the exact same code as the one i'm testing on my computer, but the result I get outside of codepen is the one shown in the gif... I have no idea why it would work on codepen and not outside of it 😕 (tried with another computer so i'm pretty sure the issue doesn't come from my setup). Here's a github page if you wish to try yourself: https://vflebus.github.io/gsap-horizontal/

About the horizontal scroll, the goal is to use vertical scroll on desktop with the mousewheel and horizontal on touch screen devices (because it seemed to me that swiping vertically to scroll horizontally wasn't very user friendly)

 

Thanks again for your help !

[GreenSock]

2 hours ago, Poney said:

Here's a github page if you wish to try yourself: https://vflebus.github.io/gsap-horizontal/

Worked exactly the same for me on mobile and desktop - I don't see any issues. If you're only looking in dev tools, my guess is it's a bug in dev tools. Are you seeing odd behavior on actual mobile devices? 

[Poney]

Yup, same behavior on mobile too. Horizontally dragging "scrolls away" from the div instead of changing it's color like it normally should