Slow scrolling speed on mobile/touch screens.

[Ziafat Ali]

Hi,

 

I have a slow scrolling speed issue on touch devices for one of my GSAP applications. Here is a quick code pen.

 

I would appreciate your help in this regard.

 

Thank you,

Ziafat A.

See the Pen WNPQXVr by ziafatali (@ziafatali) on CodePen

[mvaneijgen]

Just tested it on iOS and it doesn't really seem slow to me.

 

Are you sure it is not just the default ease your tween has (power1.out) if you set it to none, does that 'feel' better? What browser/OS are you testing on?

 

See the Pen NWoZYBP?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Ziafat Ali]

Testing on Android browser and only the horizontal scroll cads scrolls slowly and other scrolls normally. 

 

See the Pen mdvZLJN by ziafatali (@ziafatali) on CodePen

[akapowl]

1 hour ago, Ziafat Ali said:

Testing on Android browser and only the horizontal scroll cads scrolls slowly and other scrolls normally

 

The reason for that might be that you are using a hard-coded relative value for your end.

Speed is equal to distance of movement of something over time - which in scrubbed ScrollTriggers translates to distance of movement of your animated elements over the scroll-distance you define via start and end of your ScrollTrigger.

Thus a change of speed is to be expected when using hard-coded values like you do, because the ratio of movement of your animation to distance of scroll (which as explained results in the speed) will likely change at some point when the width of the window changes.

Have a look at this pen; resize it and watch the value in the upper left corner change with your hard-coded value as its basis.

See the Pen GRzbGKN by akapowl (@akapowl) on CodePen

 

 

If you want to make the speed equal across all browser-widths, use a value for your end, that will change in the same way, as the value for your animation will - e.g. that exact value itself (will feel most natural) - and make sure to also use it as a function-based value if you want it to react to resizing.

Does that work better for you?

See the Pen vYbqrEK by akapowl (@akapowl) on CodePen