Problems with jumping scroll on mobile scrolltriggers

[AllenIVe]

Hello guys,

 

we are working on a new project, but we have a big problem on mobile.

We use both scrolltrigger and locomotives scroll, on mobile once the user stops scrolling he is sent back to the top of the page.

I can't understand what the problem is, we have entered several console logs when refreshing locomotives and also scrolltriggers..

Can anyone give us a hand?

 

I think the problem was here 

 

locoScroll.on("scroll", ScrollTrigger.update);

 

// tell ScrollTrigger to use these proxy methods for the ".data-scroll-container" element since Locomotive Scroll is hijacking things

ScrollTrigger.scrollerProxy(".site", {

 

scrollTop(value) {

 

return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;

 

}, // we don't have to define a scrollLeft because we're only scrolling vertically.

getBoundingClientRect() {

 

return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};

}

 

});

 

If i wrap this inside a  

if ($(window).width() >= 768) {   

 

media query, all works fine, but i need a clean solution. 

 

http://rambl.oneupstudio.it/

 

 

[Rodrigo]

Hi,

 

It's virtually impossible for us to debug a live site. On that note I tested that url on both Firefox and Chrome on Android and I don't see the issue you're mentioning. I assume that this is happening on iOS? Please provide a minimal demo that clearly illustrates the issue you're having and as much details as possible regarding browser and OS where this is happening.

 

Also it might be worth trying to remove locomotive and see if the issue gets fixed, so you can isolate what could be happening to be a GSAP related issue or something else in your app.

 

Sorry I can't be of more assistance.

 

Happy Tweening!

[Rodrigo]

Hi,

 

I saw that you updated the original post. Is better to add a new answer to the thread because with that we get the notification about it.

 

Regarding that, what exactly you don't consider clean about using GSAP MatchMedia? Match Media is great in the way that it automatically reverts and resets everything when the breakpoint(s) is/are passed so you don't have to manually track your GSAP instances and kill them by hand.

 

I suggest you to take a good look at the docs and see the examples we have for our users:

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

If you keep having issues, please remember to add a new response in this thread and include a minimal demo.

 

Happy Tweening!

[GreenSock]

Two quick things;

1. Make absolutely sure that you're using the latest version of GSAP (3.11.4 right now).
2. I believe LocomotiveScroll changed their API in v4, so you may need to change this: 

   // old
   locoScroll.scrollTo(value, 0, 0)
   
   // new
   locoScroll.scrollTo(value, {duration: 0, disableLerp: true})

   We can't really support 3rd party libraries but here's the LocomotiveScroll demo from our docs in case it helps: 

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

[luisglez2212]

Hey, I have the same problem, did you find a solution?

[GSAP Helper]

Hi @luisglez2212 and welcome to the GreenSock forums!

 

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[luisglez2212]

Here it is.

When the scroller stops or reaches the end of the page, the view automatically scrolls to the top of the page. This only occurs when watching the page in mobile phone, not when watching the responsive via desktop.

See the Pen BaGVqvB by luisglez22 (@luisglez22) on CodePen

[Rodrigo]

Hi,

 

Your codepen example is far from being minimal (more than a hundred lines of HTML and hundreds of lines of CSS and JS). On top of that you are using Locomotive, which is not a GSAP product. Unfortunately we don't have the time resources to go through complex codebases (that's why we ask for a minimal demo) trying to find issues for our users.

 

The only advice I can give you is to try ScrollTrigger normalize scroll method:

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

 

Another option  is try the ignoreMobileResize config on the ScrollTrigger defaults as well:

ScrollTrigger.defaults({ ignoreMobileResize: true });

Finally it seems that you're not setting up ScrollTrigger to work with Locomotive correctly. Take a look at this example in order to check the best possible way:

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

 

Hopefully this helps.

Happy Tweening!

[luisglez2212]

Unfortunately none of the solutions helped me (I fixed the Locomotive Scroll implementation with Scroll Trigger) but I've found one.

 

When setting up the mobile and tablet scroll for Locomotive Scroll, I deactivated the smooth in order to maintain the vanilla scroll of the browser as Locomotive Scroll gives a really slow scroll on mobile. This is what caused the problem.

 

However, if you put a touchMultiplier instance to Locomotive Scroll you can actually replicate the vanilla scrolling speed. My set up looks like this now:

const locoScroll = new LocomotiveScroll({

el: document.querySelector(".scroll-smooth"),

smooth: true,

multiplier: 0.25,

lerp: 0.035,

touchMultiplier: 9,

tablet: {

smooth: true,

breakpoint: 0,

lerp: 0,

},

mobile: {

smooth: true,

breakpoint: 0,

lerp: 0,

},

});

 

It's not the optimal solution if you want to quit smooth scrolling for mobile...but for me it works.