Problem with ScrollTrigger and ScrollTrigger.refresh() on mobile

[sparks]

Hi everyone,

 

I can't provide a CodePen example, since a work in progress and too complex. The problem only appears on mobile (iPhone Safari), Desktop and even iPad works fine. But I think my explanation of the problem might already be enough:

 

I have a one-pager, where I use GSAP together with ScrollTrigger and ScrollSmoother. I have several paragraphs with a headline and some text. Currently, I pin each headline to the top, as soon as it gets there. In the end value, I define how long it should be (until the complete paragraph of text below it has scrolled above it). 

 

I have this code for every headline, with its own classes and start / stop values. The start / stop value is set depending on the current device. 

 

 

gsap.to(".headline_sortiment", {

scrollTrigger: {

trigger: ".headline_sortiment",

start: (() => {

if (deviceDesktop) {

return "top 0px";

} else if (deviceTablet) {

return "top 0px";

} else if (deviceMobile) {

return "top 0px";

}

})(),

end: (() => {

if (deviceDesktop) {

return "4000px top";

} else if (deviceTablet) {

return "4000px top";

} else if (deviceMobile) {

return "4000px top";

}

})(),

pin: true,

pinSpacing: false,

scrub: true,

onEnter: () => {

const headlineSortiment = document.querySelector(".headline_sortiment");

headlineSortiment.style.background = "linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.8407738095238095) 46%)";

},

onLeave: () => {

const headlineSortiment = document.querySelector(".headline_sortiment");

headlineSortiment.style.background ="linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.8407738095238095) 46%)";

},

onLeaveBack: () => {

const headlineSortiment = document.querySelector(".headline_sortiment");

headlineSortiment.style.background = "transparent";

},

},

});

 

My problem is the following: When I'm on mobile view and scroll down, the first headline pins fine, but the second one (code above) starts pinning about 5-600px below the top of the window. 

 

This happens for every headline following as well. I guess it has something to do with the mobile calculation of the document height. When I scroll to the first headline and wait until it sticks (wrongly) around 600px from the top, and then enter ScrollTrigger.refresh() into my JS Console, it instantly places the headline where it should be.

This works also for every other headline. Is there any way to programmatically refresh everything once the headlines come into view? I guess that could solve my problem. I tried creating an event listener and refresh after every scroll, but that's of course no viable option.

 

Any help is greatly appreciated. Thank you!

 

 

 

 

 

[GreenSock]

If I'm following you correctly, it sounds like the problem is that the mobile browser hides/shows the address bar which CHANGES the height of the page. In order to avoid interruption of the momentum scrolling and maximize performance, ScrollTrigger waits until the page is done scrolling before it calls ScrollTrigger.refresh(). It sounds like you don't want to wait, so you can just set up your own resize event handler that calls ScrollTrigger.refresh() so that it's forced immediately on every resize event. 

[sparks]

Hey, thanks for the answer! 

 

I think it has nothing to do with the browser address bar, since it also doesn't work in chrome mobile preview, where there's no address bar that pops in.. I have a feeling that through this responsive layout where a few columns are hidden, result in a different page height, which might confuse the script? But I think that can't be it, cause Scrolltrigger gets the current document height... 

 

I just think of that because it works when I run ScrolLTrigger.refresh() as soon as the object comes into view. 

 

I'm happy for any other ideas?

 

 

[GreenSock]

The only other thing I can think of is that you're lazy-loading images or something else in the DOM isn't settled when the page loads (which is when ScrollTrigger does its measurements). If you're shifting things around in the layout or images are loading that then move things in the layout, you need to make sure you call ScrollTrigger.refresh() right after that's done so that calculations are correct. 

[sparks]

Thanks for your input. I didn't think of potential lazy loading. I deactivated it, but the results were the same.

I solved it by running ScrollTrigger.refresh() once it reaches certain scroll positions, which did the trick for me.

[GreenSock]

Yeah, that means you've got something else that's changing your layout AFTER the window's "load" event fires. You'll need to find that and then make sure you fire the ScrollTrigger.refresh() right after that's done. We can't really tell you what the root cause is because you never shared a minimal demo. But if your solution is working, great - it just seems a bit odd, that's all. ScrollTrigger.refresh() can be an expensive process so I wouldn't personally do that in the middle of a scroll which is performance-intensive. I'd rather do it immediately after the page layout settles. 

[sparks]

Sorry - I just saw your reply! I'm sure it has something to do with the site and its contents, not with ScrollTrigger. The refresh was more like a short-fix since the page had to go online. I will investigate further and try to find out what's the reason for it. I couldn't post a demo, since its the whole site itself that surely is causing the problem