Jump to content
Search Community

Horizontal ScrollTrigger on mobile

gn90 test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

Hi again,

 

just wanted to ask if there are any solutions to get a horizontal Scrolltrigger to work on mobile? Or are there any good concepts on how to approach this? Haven't found something in the forums about this. I am not an javascript pro so i hope there is some easy going solution for this.

 

Thanks in advance,

Gui

See the Pen KKZBprM by gn90at (@gn90at) on CodePen

Link to comment
Share on other sites

  • Solution

Mmh,  it feels weird, you are the one that is disabling the horizontal scroll with `body { overflow-x: hidden; }` can't you just remove that line of CSS on mobile so it scrolls horizontal like you want?

 

There is not really need to hack the scroll bar if you just want your site to scroll its natural way. On PC you are correct in implementing a fix, because not all devices can scroll horizontally, but on mobile you don't need that fix or am I missing something? 

  • Like 3
Link to comment
Share on other sites

Hello @gn90

 

@mvaneijgen's suggestion will probably only work if you are going to not have that fake-horizontal-scrolling ScrollTrigger active on mobile - you can handle different ScrollTriggers for different media-queries via ScrollTrigger.matchMedia() btw.

 

If you are still going to have that ScrollTrigger active on mobile, you will have to implement a draggable-solution for it to also work when swiping left/right - like this demo from the ScrollTrigger-How-To Collection on codepen does.

 

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

 

Happy scrolling!

 

  • Like 4
Link to comment
Share on other sites

I've wrapped your code in a `ScrollTrigger.matchMedia` and set it to the value you also define in your code (992px) and I've updated your CSS to make the scroll visible on 991px one pixel before the javascript kicks in. So right now all your javascript is disabled on small screens and only starts working when the browser size is 992px in width. Maybe that is not correct, but it shows you the logic you can work width 

 

See the Pen MWrBNNN?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen

 

There a also a lot of horizontal scroll demo's on https://greensock.com/st-demos/ (search for "horizontal") this one has the effected mapped to  only horizontal scrolling 

 

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

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...