GSAP 3.10.4 issue scrollsmoother (on phone drag X and normalizeScroll)

[AnimatiCSS 8 Likes (Newbie)]

Hello,

first of all thank you for this fantastic library!

 

I have created a codepen with the following problem:

If you access from phone, when dragging on the X axis, scrolling on the Y axis is also applied!

Since there is a slider, users will make that touch movement on the X axis to display more slides, but doing so breaks the user experience due to the issue I mentioned.

 

Before, in version 3.10.3 this did not happen (with the same configuration that you see in that codepen).

If you want to check the correct operation, you should use all the libraries in version 3.10.3 of GSAP (I don't know how to do it, right now there is V 3.10.4 in the codepen)

 

See the Pen rNJGzGa by animaticss (@animaticss) on CodePen

[GreenSock 18,888 Likes (Superhero)]

Sorry about any confusion there - it is directly related to the normalizeScroll feature of ScrollTrigger and it should be resolved in the next release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js

 

Better? 

 

For now, you can simply disable the normalizeScroll feature.

[monolith 0 Likes (Newbie)]

Hi, is there any word the the release date for this next version?

[GreenSock 18,888 Likes (Superhero)]

We're hard at work on the next release, @monolith. Hundreds and hundreds of hours have gone into it, but I cannot give you a release date right now, sorry. iOS Safari is just horrible. Absolutely terrible to deal with regarding scroll-related issues. There are obvious bugs that have existed for years and their team is unresponsive unfortunately. We're burning a ton of resources trying to work around the Safari bugs. Thanks for your patience. 

 

Since you're a Club GreenSock member (thanks!), I can get you a beta version if you'd like to kick the tires of what we've got so far. Just say the word and I'll send you a DM. 

[AnimatiCSS 8 Likes (Newbie)]

Version 3.11 with lockAxis: true would solve this bug, right?

can it be added to scrollsmoother? this is where I get the error

@GreenSock

[Cassie 5,658 Likes (Superhero)]

Hey there - lockAxis is a draggable plugin property and you're not using draggable, so no.

Is this link still causing issues for you on mobile though?

 

https://cdpn.io/pen/debug/rNJGzGa

 

 

[AnimatiCSS 8 Likes (Newbie)]

1 hour ago, Cassie said:

Hey there - lockAxis is a draggable plugin property and you're not using draggable, so no.

Is this link still causing issues for you on mobile though?

 

https://cdpn.io/pen/debug/rNJGzGa

 

 

 

Hello,

 

LockAxis is a property added to Observer.

Scrolltrigger can set an Observer with the ScrollTrigger.observe() method.

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.observe()

ScrollSmoother, it is still a ScrollTrigger.
So can our ScrollSmoother set the .observe() to lockAxis true to solve the problem in this thread?

 

Thank you

[Cassie 5,658 Likes (Superhero)]

Oh sorry, observer not draggable. I don't think so, sounds a little convoluted?

 

Could you possibly first just check the link I provided using the latest release and let me know if the issue is still there? Then we can check alternate approaches if not.

[AnimatiCSS 8 Likes (Newbie)]

7 minutes ago, Cassie said:

Oh sorry, observer not draggable. I don't think so, sounds a little convoluted?

 

Could you possibly first just check the link I provided using the latest release and let me know if the issue is still there? Then we can check alternate approaches if not.

 

Yes, the problem persists.

[AnimatiCSS 8 Likes (Newbie)]

8 minutes ago, Cassie said:

Oh sorry, observer not draggable. I don't think so, sounds a little convoluted?

 

Could you possibly first just check the link I provided using the latest release and let me know if the issue is still there? Then we can check alternate approaches if not.

Observer with lockAxis: true.

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

[Cassie 5,658 Likes (Superhero)]

Let's just leave lockaxis aside for a few minutes. 

 

 

This is the latest version on my iphone, safari. What are you seeing on mobile and on what device/browser?

[AnimatiCSS 8 Likes (Newbie)]

49 minutes ago, Cassie said:

Let's just leave lockaxis aside for a few minutes. 

 

RPReplay_Final1661180688.mov 3,96 MB · 1 descarga

 

This is the latest version on my iphone, safari. What are you seeing on mobile and on what device/browser?

Thanks for trying, I will record the screen as soon as I can and attach the video

[Cassie 5,658 Likes (Superhero)]

Thanks so much! Let us know which device and browser too!