Horizontal scroll on trackpads

[Bornfight]

Hi guys,

I have set up horizontal scrolling page using scrollTrigger and that works just fine (Lenis smooth scroll is present if that in any case impacts the following issue at all).

Horizontal scroll:

let scrollTween = gsap.to(this.scroll, {
                    xPercent: -100,
                    x: () => "100vw",
                    ease: "none",
                    scrollTrigger: {
                        pin: this.wrapper,
                        trigger: this.wrapper,
                        start: "left left",
                        end: () => `+=${this.scroll.offsetWidth} bottom`,
                        scrub: true,
                    },
                });

 

What I need to accomplish is if users on trackpads (macbook) scroll horizontally (swipe with two fingers in the horizontal direction on trackpad) scrollTrigger updates and everything works as a "normal" scroll. overscroll-behavior-x: none;  is also added to body to prevent default gestures on trackpad — browser history back/forward. Is there a way Observer can come in to handle this and update scrollTween somehow? Thanks...

See the Pen poQKYEw by karlovidek (@karlovidek) on CodePen

[akapowl]

Hello there.

 

4 hours ago, Bornfight said:

Is there a way Observer can come in to handle this and update scrollTween somehow?

The example in this thread might help you get on track with that.
 

 

It is also to be found in the Observer Showcase Collection...

https://codepen.io/collection/KpNYOd

 

...and the ScrollTrigger How-To Pens Collection over on GreenSock's codepen.

 

https://codepen.io/collection/AEbkkJ

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

 

[Bornfight]

@akapowl thank you for the answers. I have tried to replicate the behavior with this approach but can't seem to make it work. Tried multiple Observer callback functions, and their combinations (e.g. onWheel with onLeft and onRight), tried to lock the axis on X, etc. Yet, still didn't manage to make it work with trackpad horizontal scrolling.

 

I understand this is an edge case and something that is specific to macbook users and trackpads but wouldn't like to let go of it if there is a possibility to make this work. Any additional guidance is much appreciated. 

 

Updated codepen with Observer example:

See the Pen GRwBVKo?editors=1010 by karlovidek (@karlovidek) on CodePen

[akapowl]

 

Ah sorry, I kind of overread the multi-touch part of your question.

I might be horribly wrong, but I don't think Observer has multi-touch support baked in (probably for good reasons) neither for actual touch devices nor for trackpads. That in itself would already make a difference btw, because one dispatches 'touch' events and the other dispatches 'wheel' events.

AFAIK there is no actual clear API for detecting multi-touch gestures - and what is recommended e.g. on the mdn web docs, to me actually feels more like a piling up of workarounds. Then again, this would  probably only apply to touch devices anyway, because of the difference in dispatched events.
 

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Multi-touch_interaction

From what I know, detecting multi-touch gestures in browser reliably, can be a real pain, which is why I also can not really be of more assistance than telling you that there are dedicated libraries trying to help with that - although of course I can not give any guarantee that they will help in your case.

 

You could have a look at hammer.js or interact.js and see if maybe they can help you detecting those multi-touch gestures, and then hook them up to do what Observer does updating the scrollTween in the demo I posted above.