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!

@nico fonseca, @GreenSock thanks to both of you, I'll try this in the upcoming days!

Hey @GreenSock, thank you for your tip! The option with the timeline sounds easy, do you have a resource about how to place callbacks on a timeline or something similar? Thanks!

Hey @akapowl, thanks so much for getting back to me! "pinSpacing: true" worked for me! Thank you as well for fixing the rotation which solved another problem with my infinite scroll! The only problem was that now my snapping isn't adjusted anymore. But I only had to multiply the number of elements by 2, so from "snapTo: 1 / 33" to "snapTo: 1 / 66" Thank you!

Okay! I just thought there is a certain gsap function for this and it only need one line of code. Thanks for helping!

Hi, the scrolling of my coded website is disabled when I change the markers to "false" or when I remove the line completely. You can try this in my attached codepen. I don't really know how this is possible as the markers are only for help while coding. I've read that it might be an css issue but I couldn't find the issue in my css code yet. Maybe someone could help me out here? Thanks in advance!

That would be a perfect solution for me! Would you mind to enter a few more lines so I know how I can insert a function based on the progress-value? I tried the following but there is a problem with it: if (scrollTrigger.progress == 0.030250048487497575) { } Thank your for the infinite scroll reference - I used some code from there and it worked instantly. Thanks @Cassie

Hey @Cassie thank you, that's very helpful! You're right, It makes totally sense to put the snapping into the same scrollTrigger. I adjusted the second number because I once changed "rotationX: -360" on the gsap.to(wheel) to "rotationX: -4000" so the wheel can spin around multiple times. But I didn't thought about the consequences on the snapping... Do you maybe have an idea how I can make the wheel infinitely scrollable? I tried the following code which worked perfectly on my previous version but it seems not to work in combination with GSAP. window.onscroll = function(ev) { if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { window.scrollTo(0, 0); } }; To use the callback within snap is a perfect solution – thanks! But I can still only call one function and not a different for any single word, right? Thank you again for your time, you're helping me a lot.

Hi @Cassie, thank you very much for the changes and the explanation! As you recommended, I started from scratch and used your last codepen changes. In my edited codepen I already have changed everything to my preferred solution. I just tried to use the snap() feature and the toggleClass feature. The snapping works more or less but I think there is still an issue when I resize my browser e.g.. Do you know what I have to change here, so that the page snaps every word in center of the page? Additionally I tried to use toggleClass to detect when a word is in the middle of the page. Every word should call the body to change to a different bg-video. In my codepen I test this by changing the color of the word. But it did not worked correctly yet. Is that useful or is there a better solution to make this possible? Thank you for your help!

@Cassie thank you, that works perfectly for me! There are some things I want to change but I don't know how. I improved my own version which I posted here yesterday. There you can see that I want the page to be scrollable without any limit, so it appears like a real wheel. Additionally I would like to be able to change every single word. So I don't need the Script which duplicates the word "gsap". I don't know how to change that. Last but not least, the words should snap in the center of the page, so there is always any word in the middle. Then, a background-video of the body should change every time the word changes. I would be so happy if you could help me, I tried my best but would like to use gsap as best as possible! Here's my code and I would like to use the cylinder mechanics of the other codePen.

@elegantseagulls here is my copied codepen in which I inserted the scrollTrigger plugin and changed the overflow of the body to "scroll". I think something is still not correct..