Mobile address bar's hiding and showing animation, stops scroll momentum dead.

[Vivodionisio]

Hi!

I'm having an issue related to the hiding and showing behaviour of the mobile address bar, and possibly the ScrollTrigger.refresh() method, which I have inside a throttled function:

 

function recalcTweenProperties() {
            ScrollTrigger.refresh();
        }

 

function throttle() {
            console.log('throttle');
            clearTimeout(timerId);
            timerId = setTimeout(recalcTweenProperties, 200);
        }

 

 

 

What happens is that after a flick of the touch screen, the scroll velocity stops dead as soon as the address bar's hiding or showing animation completes. After that you can continue to scroll without interruption, until you trigger the hide or show animation by scrolling in the opposite direction.

Presumably, when the address bar completes its animation and the refresh() method is called, the scroll progress and velocity are being forgotten.

Has anyone come across this issue? 

I did put together a minimal demo but the svelte REPL output is within a container div so that address bar animations aren't triggered. It at least shows the code though:

https://svelte.dev/repl/66a7dda8c37a4023b3aa5fb818b7c8ed?version=4.0.1

I wonder that my best recourse is to try and disable the address bar hide animation.

Many thanks, 
Saul

[Rodrigo]

Hi,

 

You can try the ignoreMobileResize config in ScrollTrigger:

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

 

ScrollTrigger.config({ 
  ignoreMobileResize: true
});

But most likely the best solution for your problem is ScrollTrigger Normalize Scroll:

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

 

Just add this on your Svelte's entry file:

ScrollTrigger.normalizeScroll(true);

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

Also make sure you're using GSAP 3.12.2 or later because there was an enhancement added that'll skip the resizing/recalculating in more situations. Worth a shot at least.