Scrolltrigger makes jump on mobile - vertical fullscreen slider

[uk_helene]

Hello,

 

I try to make et vertical fullscreen slider on a website with GSAP ScrollTrigger and ScrollToPlugin, and I am experiencing problems.

On desktop, everything works well but on mobile, the scroll is totally crazy.

 

I based my slider on this codepen 

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

 and add dots manually to navigate in addition to the scroll.

On mobile only, when I scroll down, the navigation goes down too low (1 slide too far) and then back up.

 

Is it due to the fullscreen ? To the JS ? If anyone has an idea, I'm interested. I'm not very good with Javascript, so GSAP seems like a white elephant (i find this expression to translate french expression "usine à gaz", i'm not sure to correctly use it ^^).

 

Thank you

 

Hélène

 

See the Pen GRXWoJw by uk_helene (@uk_helene) on CodePen

[Rodrigo]

Hi @uk_helene and welcome to the GreenSock forums!

 

We're currently looking into this, sorry for the inconveniences 🙏

 

Please stand by.

Happy Tweening!

[uk_helene]

Hi @Rodrigo,

 

Thank you.

I hope you'll find something to help me.

 

Have a good day.

[GreenSock]

How's this?: 

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

 

Comments: 

1. position: sticky is terrible for performance and I would definitely not use it (at least in this context). Try it with and without and you'll probably notice a big difference. 
2. When you enable normalizeScroll(), it uses JS to do the scrolling, including the momentum/flick scrolling. It does the momentum stuff with an inertia-based tween, so in this case that was running AND the scrollTo tween was also running and they were conflicting. In the next release of ScrollTrigger (which is used in the demo above), I added code to sense when the scroll position is changed outside of the inertia tween and if it senses that, it'll stop the momentum tween. 
3. On touch devices, it's best to preventDefault() and stop propagation of the "touchstart" event if there's an in-progress scrollTo tween that has autoKill: false so that it doesn't interfere when the user attempts to touch-scroll. 
4. On touch devices, I think it's best to disable() and enable() the normalizeScroll() observer in an onStart, just so that if their finger is still on the screen and they try to touch-scroll, it doesn't allow it (until they release their touch)

I hope that helps. 

[uk_helene]

Hi @GreenSock,

 

This solution works perfectly !

Thank you very much.

 

Now I have to improve myself