ScrollTrigger horizontal scroll section with native horizontal scrolling

[maximee]

Hey GSAP experts,

 

I'm looking to have a horizontal scroll trigger control the horizontal scroll position of the div to be horizontally scrolled, instead of translateX.

 

The end goal here is simply this, in case you can think of a better way to achieve it:

 

Scroll right = section scrolls right 
Scroll left = section scrolls left  
Scroll down = section scroll right
Scroll up = section scroll left

 

Essentially adding left and right "native" scrolling to the ScrollTrigger horizontal designs we commonly see.

 

We want mobile users to be able to swipe left and right, as well as up and down, through the horizontal elements.

 

In the codepen I shared, I wrote the code to make this work, and I'm partly there... I'm stuck at syncing the windows' scroll position properly when I scroll the horizontal scroll container directly.

 

See the Pen mdLeZNr?editors=0010 by maxime-desrosiers (@maxime-desrosiers) on CodePen

 

I made an attempt at this in this codepen, but I'm running into conflicts where both codes are triggered, or only one of them is... 

See the Pen oNdbvaM?editors=0010 by maxime-desrosiers (@maxime-desrosiers) on CodePen

 

Thanks for any help with this!

 

 

See the Pen by (@) on CodePen

[GreenSock]

Is this what you're looking for?: 

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

 

FYI, you could just use a type: "touch,wheel" Observer to move on the horizontal axis when the user drags/wheels in that direction rather than having the native scroll behavior. What bothers me about the demo is that desktop users see an ugly scrollbar in the middle of the page when scrolling up. So I'd just listen for the events and move the x of the element instead so that I can eliminate the scrollbar. But that's just me

 

I hope that helps!

[maximee]

Thanks you very much for your reply, it's exactly what I am looking for.

 

It works wonderfully well in a desktop browser, and even in the mobile preview of a desktop browser. However on actual devices (whether iOS or Android), it's quite buggy... there seems to be browser rending bugs, and sudden scrolling to random places...

 

It happens in both this version, which is essentially the same as you shared, with the scroll bars removed with CSS : 

 

See the Pen JjvKLPN by maxime-desrosiers (@maxime-desrosiers) on CodePen

 

And these bugs also happen in this version, which I believe is the other method you suggested. Thank you for the suggestion, that is closer to what I'm actually looking for, I want to keep the "scrub" working.

 

See the Pen rNvLpqo?editors=0010 by maxime-desrosiers (@maxime-desrosiers) on CodePen

 

None of them work well on an actual mobile device, but they both work perfectly in the Chrome mobile preview on desktop.

 

If by any chance you have an idea how the behaviour could be improved on mobiles... 

 

Thank you!

[GreenSock]

I assume what you're describing is caused by the mobile viewport RESIZING due to the address bar showing/hiding. ScrollTrigger will automatically call a .refresh() whenever the viewport resizes so that the start/end positions get recalculated properly. If you want to skip that, you can do this: 

 

// don't refresh() when the viewport resizes by less then 25% on the vertical axis (only)
ScrollTrigger.config({ 
  ignoreMobileResize: true
})

Does that resolve things for you? 

[maximee]

Hey Jack,

 

No sorry it doesn't... I already have this setting in both codepens in fact at the top of the JS.

 

It's hard to describe the actual problem. The scroll position "jumps" a bit randomly, and going left to right or right to left just isn't really working as expected... it's buggy. 

 

On the codepen where the horizontal scroll is an actual horizontal scroll box, there seems to be a browser level render bug where having that scrolling box being fixed, and also scrolling horizontally, while scrolling down the page, makes it sometimes disappear / go all white.

 

Again in the mobile preview on desktop it's all perfect. Just on actual mobile devices it's buggy.

[GreenSock]

Yeah, I really wouldn't recommend doing it that way anyway. It requires that the values be EXACTLY synchronized in both directions in terms of your math. I applied Math.round() to help a bit, but if it's a bit off you'll get it bouncing back and forth where the vertical scroll happens which causes the horizontal scroll which causes the vertical scroll,  and around and around we go. It'll only work if the value is perfect which means it wouldn't cause any scroll event in the other direction. If I were you, I'd probably go with what I suggested earlier where you use Observer to do the horizontal "scrolling" (but it's not actual native scrolling - it's changing the y transform). 

 

Or just do some experiments to figure out what's causing things to not be synchronized perfectly on mobile with the math calculations and the native stuff. 

 

Good luck!

[maximee]

10 hours ago, GreenSock said:

If I were you, I'd probably go with what I suggested earlier where you use Observer to do the horizontal "scrolling" (but it's not actual native scrolling - it's changing the y transform). 

 

I have done that already though... in Codepen 2 I shared above. This one :

 

See the Pen rNvLpqo by maxime-desrosiers (@maxime-desrosiers) on CodePen

 

Could you please confirm that's what you meant? I used self.deltaX; to get the horizontal scroll values...

 

It works to perfection and uses translateX instead of a scrolling container, but it only works to perfection in the mobile preview on desktop... on mobile devices it's jumpy.

 

Thank you for your advices, really appreciated!

[GreenSock]

Were you looking for something like this?: 

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