Please explain this use of "scroll" in event listener

I have been working on some design features which use JavaScript to manipulate the DOM on scroll; Basically I have been trying to create cool scroll effects in my bootstrap projects such as the one in this link:

https://neromotion.co.nz/about-us

I have since found css library animate.css which is the only library I have been able to get working so far, I have then tried to trigger these animations with event listeners, so far mouse controls work fine with the listener but i cant get scroll effects to work right.

I have discovered that my listeners have to target the window object rather than the document object but the effect looks like trash. I can see its something to do with the rate at which the listener is firing and though I have read the MDN docs and do not understand entirely what the code block is doing.

Can anyone please explain the way use of "scroll" works in regards to animations? I have provided the docs for "scroll" and for "resize" as they are both similar, if someone could help me to understand how this code is working I would be really grateful..

(mdn docs for scroll: https://developer.mozilla.org/en-US/docs/Web/Events/scroll) (mbn docs for resize: https://developer.mozilla.org/en-US/docs/Web/Events/resize#Example )

P.S I after spending hours trying to use JavaScript (don't yet know any jQuery) to do this I did discover a library called scroll reveal (https://scrollrevealjs.org/) which I may use for my project in future, however I would like to at least understand this JavaScript method on the MDN page.

In addition, any insight to how the developer of neromotion in my above example has achieved these results, whether there are recommended libraries for this stuff or there is the need to create code from scratch...Thanks in advance!!