Mobile size bug - markers end move

[JohnMersal]

Hello dears,

 

I'm trying to build a website that tells a story. and I have a div (image of a coffee bean) moving from one section to the other in a specific position.

Just for a quick info: I'm refactoring this website https://yemenicafe.com/en (I built  on my very early days of JS and GSAP so its buggy)

 

So I'm building the skeleton from scratch with my current knowledge but still having some issues with it.

Specially on mobile with the header and footer hiding and showing making my animation bug out 

 

I'm using "svh" for the height of the sections, but to see the problem please check out how the bottom markers are behaving on mobile

Here is a CodePen: 
and here is a Netlify deployed page for you to review on your mobile: https://candid-churros-7c0625.netlify.app/

 

I hope this is enough info to help me debug/guide me on a better approach to build this correctly. 

 

Thanks.

John

 

See the Pen LYaJbZL by john-mersal (@john-mersal) on CodePen

[mvaneijgen]

If you use the latest version of gsap/ScrollTrigger you can set ScrollTrigger.normalizeScroll(true); see https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll() Hope it helps and happy tweening! 

 

See the Pen MWxqbLb?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[JohnMersal]

@mvaneijgen Thank you so much for this!

So your approach DID work, but for some reason, it made everything so glitchy and slow. however, it did maintain the header/footer of the browser to remain all the time, oh and I cannot PULL TO REFRESH using this approach , maybe I'm doing something wrong?

 

So I tried "  ScrollTrigger.config({ ignoreMobileResize: true}) " which I got from the document you provided, and it worked even better. 

 

Normalize Scroll Approach: https://candid-churros-7c0625.netlify.app/index2.html
Ignore Resize approach: https://candid-churros-7c0625.netlify.app/

 

Thank you for pointing me in the right direction much appreciated.