voit. Posted July 10, 2020 Share Posted July 10, 2020 Hi! I'm trying to achive the effect that on scroll down/up GSAP animation will play and change the section content and after it reaches the last section it will display first section content and so on if scroll up on first content it display last content, but the eventListener is added on wheel, because I want to prevent page scroll, and here is the problem. If you scroll while the animation is playing it will display wrong content and if you scroll too many times the incrementation / decrementation will brake the code, so my question is: can I disable mouse wheel on a time when the animation is playing? Tried to use preventDefault() on event, but it didn't work at all. It's this codepen: Codepen Also I'm sorry if the solution is kinda messed up, but this was the only thing that came to my mind. Then after I asked this question on StackOverflow I recived the information that I can use .then(), but the problem is that when i change everything up then there is still a small problem, that if i scroll even few times while the animation is playing, then the animation is played again this many time it detects mouse wheel. See the Pen GRoGjZK by voitb (@voitb) on CodePen . So here is my question. Can i somehow change it up, so it will not animate multiple times and will not break whole code? Sorry for not putting code here, but it is a lot of it. Also I know it's not really a GSAP problem but I think I would recive better solution here. Cheers! See the Pen JjGvwNx by voitb (@voitb) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 10, 2020 Share Posted July 10, 2020 Hey voit and welcome to the GreenSock forums. We show how to do infinite looping here: See the Pen rNOebyo by GreenSock (@GreenSock) on CodePen You could limit the number of sections that can be scrolled to in one go by toggling the overflow: See the Pen GRoGNOM by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
voit. Posted July 10, 2020 Author Share Posted July 10, 2020 Hi Zach! The second example would fit, but the problem is, I want to change the section content after like one scroll down or up, not after it reaches some height. The problem with this demo is that I want the section to have 100% height, but doing it like it's show in the second demo, another section will appear after it's scrolled by 20% of body or 100% of section, but if i change the body height to less, I won't even get the possibility to scroll... Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 10, 2020 Share Posted July 10, 2020 Having the scroll fire as soon as someone touches the mousewheel is likely prone to make users frustrated if they accidentally scroll a little bit. With that being said, what are you expecting people who don't have a mousewheel to do? Like users with a touch screen? You should probably be using a library like HammerJS to handle the interactions then use GSAP just for the animations. Or use a full solution like fullPage.js. Regardless here's one way to do it with just mousewheel support: See the Pen BajVprg?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
voit. Posted July 10, 2020 Author Share Posted July 10, 2020 I'll be honest, I totally forgot about touch screen... But thank you so much, it's what I was looking for! I'll have to come up with different solution for mobile ? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now