ScrollTrigger.normalizeScroll() is not a function

[WaReZoR]

ScrollTrigger.normalizeScroll(true);
const mainSliderSection = gsap.timeline({
			scrollTrigger: {
			trigger: '#sc1',
			scrub: true,
			pin: true,
			start: "bottom bottom",
			end: '+=100%'
			}
		})
		mainSliderSection
			.addLabel('sc1')
			.fromTo('.pagination-main', { autoAlpha: 1 }, { autoAlpha: 0 })
			.to('#sc1', { autoAlpha: 0 }, '<+=0.2')

Hi all, sorry in advance for asking a probably stupid question. I am a newbie. Faced with a problem in iOS browsers and in general with the work of gsap on mobile devices, after studying the documentation found ScrollTrigger.normalizeScroll();
But how to use it or make it work, I did not understand. With the above code I get the following message:

Quote

Uncaught TypeError: gsap_ScrollTrigger_js__WEBPACK_IMPORTED_MODULE_3__.ScrollTrigger.normalizeScroll is not a function

 

[Cassie]

Hey there!

 

I haven't seen that error before. Do you have a demo? What version are you using?

[WaReZoR]

Unfortunately the page contains a very large amount of media, without a premium subscription will not be able to lay it out, at the moment in our country at war and spend money on such things has become too expensive, I can only provide a link to the landing page. https://shl.mediacreator.agency/test
The latest version is used, which is installed from the npm

link without media, 

See the Pen KKZGgeR by warezor-ua (@warezor-ua) on CodePen

[GreenSock]

@WaReZoR I'm not seeing that error message in the demo you provided. The error message certainly sounds like you're using an old version (before .normalizeScroll() existed). I'd be willing to bet that's what the problem is. Try to do a console.log(ScrollTrigger.version) - what does it say? 

[WaReZoR]

Thank you for your feedback, here are the results of the console log output

 

In the example that I posted this error does not exist, because I commented out the string, and in the link to the working test page, I wanted to show the problem I encountered on mobile devices

[GreenSock]

Yep, there's your problem

 

ScrollTrigger.normalizeScroll() was introduced in 3.10

 

Update and you should be good-to-go. The latest version is 3.10.3 (and a .4 patch is coming very soon)

[WaReZoR]

Thanks, I'll give it a try now!

[WaReZoR]

The error is gone, but the result is not visible, the bug with the moving address bar in the browsers remained.
Maybe in addition to ScrollTrigger.normalizeScroll(true); I need to do something else?

 

The page consists of full-screen blocks, when you crawl back and forth, it leaves an empty space for a while, it breaks all perception of the effects and the page as a whole on mobile devices and why it lags very much?

[GreenSock]

I'm not sure I understand your question, but if you want to have ScrollTrigger avoid doing a refresh() (to recalculate the start/end values when the viewport resizes from the address bar showing/hiding), you could:

ScrollTrigger.config({ ignoreMobileResize: true });

And you don't need to .normalizeScroll(true) if you don't like that effect. 

[WaReZoR]

I added a line with the parameter above, after the address bar showing/hiding, the size of the content has stopped changing, but a white piece of page at the bottom remains, it looks terrible.
I think that without ignoreMobileResize: true the browser is trying to do everything right, but since everything is slow, the resizing is not so fast that the white bar from the address bar quickly disappears.
About the lags on the site when the animation is on, it happens without normalizeScroll, the animation itself is not complicated, but when you turn it on there is something incomprehensible to me, which the phone can not cope.

 

If I could show you a video from my phone of what's going on, maybe you would understand what the problem is.

[WaReZoR]

I disabled normalizeScroll, the lag is almost gone, but the behavior of the 100vh block is still confusing to me.

When scrolling, the block is partially scrolled up as much as the address bar takes up space before it disappears, then only the pin is triggered.

Is there any way to set the height so that it ignores the address bar and always the content is under it?

[GreenSock]

Yeah, it's very difficult to troubleshoot blind. 

 

By default, ScrollTrigger will WAIT to .refresh() until scrolling stops because otherwise, the .refresh() will stop the momentum scroll. You can force a refresh in a "resize" event handler on the window, of course, to make it happen right away. 

 

There's a fundamental logic issue at play: if you want your triggers to adjust to have the correct (new) start/end positions at the new viewport size, that requires a .refresh() call (which is somewhat expensive because all the optimizations are done up-front so while scrolling you get maximum performance). If you don't want things to adjust and you set ignoreMobileResize: true, then of course you don't get the shift that'd be caused by refreshing/correcting positions but you also don't get the accurate start/end trigger positions. It's not a bug in ScrollTrigger or anything - it's a fundamental logic thing. 

 

8 minutes ago, WaReZoR said:

Is there any way to set the height so that it ignores the address bar and always the content is under it?

You'd have to set that in your CSS so that it's not using vh, for example (because vh changes when the viewport height changes from the address bar showing/hiding). 

[WaReZoR]

Not quite so, what happens in fact, when the page is loaded, the first block takes 100vh, the content of this block is located under the address bar, thus occupies the entire height, after the start of scrolling the top of the block goes beyond the top edge of the screen, exactly as much space as the address bar at the bottom of the browser, and only at this point triggers ScrollTrigger pin and block freezes for animation.

[GreenSock]

I'm not sure what you mean by "block freezes for animation" (are you referring to pinning?).

 

It kinda sounds like you're describing some CSS issue. If you have the height set to 100vh and you're saying that it goes UNDER the address bar, that definitely doesn't sound accurate. 

 

If you need more help with any GSAP-specific questions, please provide a minimal demo that focuses only on the problem you're facing (not your whole site - just a few colored boxes is fine) and we'd be happy to take a peek. 

[WaReZoR]

Yes, pinning is exactly what I mean! Here is a video of how the block behaves, I will try to make a demo of two blocks, but maybe the video will make it clear what I was talking about.

 

[GreenSock]

Thanks for the video. It's still super hard to troubleshoot without seeing a minimal demo in context, like a simple CodePen.

 

Just to verify, you're saying that when you set the height of something to 100vh in iOS 15.4, it actually goes BEHIND the address bar (so it's obscured)?

[WaReZoR]

https://shl.mediacreator.agency/test
If it's not too much trouble, open this link on your mobile device, and try scrolling up and down the first block. It is actually 100vh high and should be fixed when you scroll because it triggers pinning, but in this place the entire body moves up beyond the visibility of the viewport. With my English it is very difficult to explain something, sorry, thank you for trying to understand and help. I'm trying to make a demo to replicate this.

[WaReZoR]

transferred more or less working version on codepen, just do not know how it helps to diagnose the mobile version and that particular problem.

See the Pen MWrPGOG by warezor-ua (@warezor-ua) on CodePen

[WaReZoR]

I do not yet understand why this is so, but the problem is solved by turning off the first block start: bottom bottom.

 

[GreenSock]

9 hours ago, WaReZoR said:

transferred more or less working version on codepen, just do not know how it helps to diagnose the mobile version and that particular problem.

Oh my goodness  

 

We cannot sift through 10,000+ lines of code for you - we were just asking for just a minimal demo, like a few colored <div> elements or something.

 

If you're triggering things with "bottom bottom", that kinda makes sense that it'd behave oddly when the bottom of the screen (where the address bar is showing/hiding) is shifting around and totally changing where things would line up. 

 

I'm also confused about why you have "width" and "height" function-based values in your timeline config. That won't do anything. Just curious what you were attempting there.

 

If you still need some help, we'd be happy to take a peek at a minimal demo and/or answer any GSAP-specific questions.

[WaReZoR]

3 hours ago, GreenSock said:

Oh my goodness  

I understand that, but I don't see how you could repeat the problem in a simplified way, sorry.

 

3 hours ago, GreenSock said:

If you're triggering things with "bottom bottom", that kinda makes sense that it'd behave oddly when the bottom of the screen (where the address bar is showing/hiding) is shifting around and totally changing where things would line up. 

Now I'll remember this I think for the rest of my life =).

 

3 hours ago, GreenSock said:

I'm also confused about why you have "width" and "height" function-based values in your timeline config. That won't do anything. Just curious what you were attempting there.

Do not pay attention to it please, it is the remnants of the experiments, I was trying to have at least some effect on the block and notice some changes. 

 

I have a couple more questions about the mechanics of gsap, can I ask them here or should I create a new thread?

[GreenSock]

8 hours ago, WaReZoR said:

I understand that, but I don't see how you could repeat the problem in a simplified way, sorry.

No worries. It's almost surely possible to do it in a much more simplified way. This is a critical technique for troubleshooting in general - isolate, isolate, isolate. Yes, it takes time but it'll be far less time than trying to wrestle through 10k lines of code and all the inter-dependencies and complexities. I'd recommend starting with a few <div> elements that resemble part of your layout, and slowly build it up from there to be closer and closer like the "real" thing until it breaks. That'll make it very clear where the issue is. 

 

8 hours ago, WaReZoR said:

I have a couple more questions about the mechanics of gsap, can I ask them here or should I create a new thread?

Yep, it's always best to start a new thread for each question. Please be sure to include a minimal demo to exponentially increase your chances of getting a solid answer

 

Good luck!