lumuxd

Hey @shikari, I did not really remember but I think wrapping everything inside another container worked for me and maybe try to set overflow to hidden to disable scrolling.

Yes that is definitely true, its just for a very specific case

Thanks, this worked for me: window.addEventListener('resize', function(event){ ScrollTrigger.refresh(); });

Hey @OSUblake sorry for getting back so late, thanks you for you code, this would work perfectly for me.

I have a centered element on my page and when I resize my browser, the element only moves back to the center as soon as I stop resizing the window. Fonts with viewport-related sizes are changing dynamically. I think this is caused by the pin-spacer over my whole element - is that possible? I noticed that it sets itself a fixed width every time I stop resizing. Changing pinSpacing: true, to pinSpacing: false, does not solve the problem. Is there maybe a way to let the element check the browsers width while resizing the window too? Thanks!

Hey @GreenSock, thanks again for your last tip. But If I get this right, your code is adding a different function each second - is that correct? In this case I am not looking for a time-based solution, but for something which is triggered as soon as a specific element is being snapped / in center of the viewport.. Do you maybe have a similar solution for me, but not time-based? Thanks!

I just updated the pen with my latest solution and it works more or less. The problem is still, that my iPhone sometimes thinks that I want to refresh the page by swiping up (in the newer iOS Safari and also chrome). So the page sometimes detects a scroll on the body (exactly between two words) and sometimes a scroll in the container. Do you have any idea how I can make clear that I only want to scroll in the container haha? Thanks!

Hey @OSUblake, thank you first of all for your suggestions and sorry that I did not answered yet. I think that your technique is working for me but I'm still not there. In my code I tried to change the scroller and tried many things like setting different element's position to fixed etc. But I always end up with a smaller box on the screen where I can scroll or just a completely blank screen. I posted my code in the following pen and I'd be very happy if you could take another look at it as I am running out of options... Thank you so much in advance https://codepen.io/m44244/pen/abwrYOZ

Thank you, that makes sense! So I have wrapped everything in another div and then set the div to postition: fixed. What else do I have to change? I did not managed to make the wheel scrollable yet... @OSUblake which value do I have to set for "scroller:" ? I tried "scroller: '#wrapper' but then the wheel disappears at all. Thank you in advance!

Thank you @nico fonseca and @GreenSock, I already tested removing the infinite scroll but this was not solving the problem... I made a litte video which shows the problem very well. As soon as I scroll the site on my mobile, the body moves up maybe because of the Safari UI and as soon as the wheel/scroll stops, the container (selected blue box) jumps up or down. (The dark background is just a small image which is called when a snap is completed – it disappears through the jump too.) The container (selected blue box) has a height of "100%" and I already tried other values like "100vh" or "auto". Maybe this helps to find the problem here.. Thank you! 1.mp4

Thanks for the tip, here's the link: https://codesandbox.io/s/async-voice-o3h0l?file=/index.html I think there was a problem with loading gsap correctly but snapping works the same and on mobile perfectly too. I don't know where the problem is.. ?

I just tried to run it with 8kb small images but the problem is the same. The page jumps several times before it snaps onto a word. scroll-behavior: smooth was also not in my css code but thanks for checking that. Do you maybe know an alternative to codepen where I can host the code for testing purpose? Thanks!

Hi @Cassie, thanks for getting back to me, I published the website on a private server which I unfortunately cannot share here. There it is not working at all. The scroll is very laggy.

I just realized that the codepen works fine on mobile but I don't know how I can illustrate that problem with opening the code in a mobile browser..

Hi, I coded something with gsap and the page is snapping to the nearest element when a scroll ends. It works perfectly on Desktop but it is very buggy on my mobile with safari and chrome. The snapping is very laggy, the page jumps a bit up and down and sometimes the snapping won't work at all. Is there maybe any common issue with gsap snap on mobiles, which I may have been doing wrong while coding the desktop version? (In my codepen there is called a background-image change every time a snap is completed, you can ignore that.) Thank you in advance!