https://github.com/proto-cool/cascade
https://www.npmjs.com/package/@proto-cool/cascade
I finally got the animate-on-scroll effect on my site working the way I'd like it to. I then brushed it up to what I considered the minimum viable product and now it's being used here, on this very site — and is now available on GitHub and NPM!
It's built on the Motion animation library, specifically the inView functionality. I wanted to leverage an existing animation library to keep things simple and just build some boilerplate animations and make it fully configurable via data attributes in HTML. Not everyone wants to write JavaScript, even those of us who can. Just saying "Hey, animate this" right in the HTML is super simple. Really! This is all you need to do to make a div fade in:
<!-- Basic fade animation when element enters viewport -->
<div data-cascade="fadeIn">I'll fade in when visible</div>Always happy to hear any feedback, good or otherwise. Thanks for reading — go forth and build cool stuff. ✌️