Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Dallah

ScrollTrigger + Locomotive on mobile breaks

Recommended Posts

Hi, I have an issue with the locomotive scroll and scroll trigger pin, but it's only happening on mobile. This issue can also be seen on the scrollProxy doc example in codepen

Somehow, the moment the scroll enters the pin section and the scroll speed is too fast, there will be a flash of white space that only appears for a few milliseconds. As seen in this video. Sometimes the section event gets detached and stacked on top of the other section

White space: 00:05 00:24. 
Section detached: 00:42

Thanks for your help and for this amazing product!

* Recorded on Android

 

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

Link to comment
Share on other sites

I think it's related to how mobile safari on iOS works, when you scroll up or down, sometimes the browser adress bar or bottom nav bar dissapears/appears which is resizing the browser, meaning the positions are being recalculated. That's why you see the flash, because the content is moving. I hope I explained that right.

 

You should try using gsap scroll smoother (has the same options like locomotive scroll) and also try normalizeScroll().

If this doesn't work, then there's another option using css and 2 lines of js, but it will force the browser to always display navbar and adress bar and also you won't be able to scroll to top by tapping top edge of the screen like you normally do.

  • Like 3
Link to comment
Share on other sites

Posted (edited)

Thanks, @thehaes for replying, but as we can see in the video, it's recorded on android and the address bar stays still, not hiding and showing.

Edited by Dallah
missing `android`
Link to comment
Share on other sites

Yep, that's due to the fact that the browser is handling scroll repainting on a DIFFERENT THREAD than the main JS one. So when you scroll quickly to a spot beyond where the pinning starts/ends, the browser is repainting the page as if it scrolled past but then a few milliseconds later the main thread executes and ScrollTrigger says "HEY! Pin that element" (but the browser had already repainted beyond that spot). 

 

As far as I know, LocomotiveScroll basically turns itself off on mobile/touch devices. 

 

You could try calling ScrollTrigger.normalizeScroll(true) and see if that helps because it basically forces scrolling to be done on the main thread. 

 

Another solution is to use ScrollSmoother instead of LocomotiveScroll :)

  • Like 2
Link to comment
Share on other sites

Thanks @GreenSock for the explanation.
I added the normalizeScroll() here. But it seems the issue is still there.

See the Pen YzexaGy by afdallah (@afdallah) on CodePen

Link to comment
Share on other sites

Sorry, to activate it, you need to pass in true (or a config object):

ScrollTrigger.normalizeScroll(true);

 

Link to comment
Share on other sites

Oh, I thought the default value is `true`. sorry.
I have updated the codepen, unfortunately, the issue is still there

Link to comment
Share on other sites

I'm having a tough time seeing it, but I'd strongly recommend trying ScrollSmoother instead of LocomotiveScroll. You can try it on CodePen for free as much as you want using this special URL (which won't work properly on other domains): 

https://assets.codepen.io/16327/ScrollSmoother.min.js

 

More info: https://greensock.com/docs/v3/Plugins/ScrollSmoother

Link to comment
Share on other sites

Yeah, ScrollSmoother is really promising but currently, I only need it for a small side project.
anyway, I really appreciate the time you spent answering the questions in this forum. Thanks!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×