[ScrollTrigger horizontal scroll section with native horizontal scrolling]

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!

[ScrollTrigger horizontal scroll section with native horizontal scrolling]

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.

[ScrollTrigger horizontal scroll section with native horizontal scrolling]

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!

[ScrollTrigger horizontal scroll section with native horizontal scrolling]

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