Allow natural horizontal scrolling with vertical scrollTrigger

[NickK]

Hi all,  is there a way to allow a user to scroll vertically as in the codepen, but also if they attempt to scroll horizontally (like with a trackpad) the result is the same and the page scrolls in the same way as vertically? 

 

Amazing work with the library! 

Many thanks in advance

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

[OSUblake]

Welcome to the forums @NickK

 

That's really not possible as the horizontal movement you are seeing isn't actually scrolling. It's just an animation tied the vertical scroll movement. The best way to simulate horizontal scrolling would be to use Draggable like this. 

 

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

[NickK]

I did wonder if that would be the case, thank you very much for the draggable option and such a swift response

[oharpr]

@OSUblake

You said that it is not possible but I found site where vertical and horizontal scroll linked together so that I am able to scroll vertically or horizontally and achieve the same effect (on MacBook with touchpad). 

 

Link to the site: Site with vertical and horizontal scroll linked together . (Sorry if it is illegal to put links here. No ads; for technical purposes only)

 

I have noticed some things:

• this page does not really has `scrollY` and it is always 0
• there is GSAP installed
• there is no drag effect

Do you have some ideas how to achieve the same effect using GSAP? Maybe some CodePen (code example)?

Would really appreciate some example because that behaviour is much more user-friendly for totally horizontal pages.

 

Thank you in advance.

[GreenSock]

@oharpr we can't really dissect a live site and provide a tutorial but from a quick glance that looks to me like a simple horizontally-scrolled section that might use something like Observer plugin to listen for vertical scroll-like behaviors (wheel, touch-drag, etc.) to animate the horizontal scroll value via JavaScript. So yeah, I'd bet that Observer would be pretty helpful to create that effect.

 

Good luck!

[Rodrigo]

That site actually has a horizontal scroll bar, at least in Chrome on Ubuntu 20 & 22

 

Somehow they are connecting events (as Jack mentioned) with that particular scroll position and the horizontal animation.

 

Another alternative is what was discussed in this thread:

 

Happy Tweening!