maximee Posted September 7, 2022 Share Posted September 7, 2022 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 Link to comment Share on other sites More sharing options...
GreenSock Posted September 10, 2022 Share Posted September 10, 2022 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! 1 Link to comment Share on other sites More sharing options...
maximee Posted September 11, 2022 Author Share Posted September 11, 2022 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! Link to comment Share on other sites More sharing options...
GreenSock Posted September 12, 2022 Share Posted September 12, 2022 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? 1 Link to comment Share on other sites More sharing options...
maximee Posted September 12, 2022 Author Share Posted September 12, 2022 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. Link to comment Share on other sites More sharing options...
GreenSock Posted September 13, 2022 Share Posted September 13, 2022 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! Link to comment Share on other sites More sharing options...
maximee Posted September 13, 2022 Author Share Posted September 13, 2022 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! Link to comment Share on other sites More sharing options...
GreenSock Posted September 14, 2022 Share Posted September 14, 2022 Were you looking for something like this?: See the Pen KKRNBME?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now