wobwobwob

No it's not related, the problem is that the animation resets when the address bar shows again. Spend days figuring out how to fix this, I fixed it by not defining a trigger. Did not even know that was possible, do you have any clue what was the problem for me so I understand? // Tale fade words const letters = document.querySelectorAll('.section-hero .tale-fade span'); let taleFade = gsap.timeline({ scrollTrigger: { // trigger: '.section-hero .sticky', start: '0', end: '+=60%', scrub: true, }, }); taleFade.to(letters, { opacity: 0, stagger: 0.1, });

The animation in my hero jumps when the address bar is hidden on mobile, I fixed this by setting "ignoreMobileResize" to true on the "ScrollTrigger.config". But some animations further down the page (that become sticky) need to be recalculated when the address bar is changed. For now I set it back, on staging you can see the that the hero animation on mobile jumps: https://neverland.owow.dev/ Is there a way to disable the mobile resize for my hero animation only? Ps: I already tried many options like InvalidateOnRefresh but without success. Kind regards, Tom

Hi, Looks like that works, thanks a lot for helping out! Kind regards, Tom

Hi, True, the demo works perfect! I found out more about the problem. The code does not seem to work well with some other GSAP animations. I am pinning a section that is 100vh and if I resize from portrait to landscape, the height of the body is one screen height shorter. I guess during resize GSAP does not detect the section having any height. When I disable this section, everything works fine. I tried to replicate the issue in a Codepen. I managed to write a code where the page breaks, when switching landscape mode (https://codepen.io/tomraas/pen/vYJyjzz). Instead of making the page too short, the codepen somehow makes it longer... Do you know a solution to fix this? Kind regards, Tom Raas

Hi, I am using a official GreenSock script found on Codepen (link), to implement SmoothScroll with the native ScrollTrigger . Everything works perfect, but when I for example go from Portrait to Landscape the ending of the screen is not visible anymore. I discovered the height of the body is changed correctly, but the transform that pushes the content up is lower. Below an example: 1. When I load the page in Horizontal mode, the Y at the end of the page is: 1486 2. When I load the page in Portrait mode and than switch to Landscape, the Y at the end of the page is: 1189. My first guess was this was caused by content that does not instantly takes shape due to transitions and such, but this is not the case. Even on a normal text page, the problem exists. I analysed the script and it looks like it's resizing as it should, could you help me pinpoint to what could be the problem? Kind regards, Tom