Suggestions on how to go about this scrolling interaction.
Specifically:
The scrolling triggers a series of events/animations.
While the animations occur the scrolling _SEEMS_disabled. Not sure.
Once the events have completed, scrolling down again will trigger a new series of events/animations.
There are maybe multiple ways to do this. I can imagine some vanilla JS solutions. However I’m wondering if anyone else has suggestions. Maybe there’s a great solution to this and some library I should know about.
I think it’s basically applying CSS animation classes based on the current scroll position, maybe in combination with scroll snap points (although browser support isn’t particularly good yet). If you want to trigger different animations based on what animations already occurred, you’d just have to keep track of this within the script, or by applying .animation-completed classes or something.
I don’t know any ready-made solution off-hand, but there are plenty of demos and instructions available on the internet. As for the page you’ve linked, I noticed transform inline-styles being applied when scrolling, so I suppose they’re using an animation library such as snabbt.js for the animations themselves.
Something like wow.js might be an easy option although its not free.
I believe these types of things work better when they are more subtle and once you’ve scrolled once you don’t really want all the animations again as they get in the way.
Although that is well done (apart from no keyboard access on that page) and looks nice, it just irritates me:)
