Disable mouse wheel while animation plays

[voit.]

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

[ZachSaucier]

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

[voit.]

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...

[ZachSaucier]

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

[voit.]

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 🙂