A little Pen I knocked together to demonstrate “CSS Animations triggered on scroll” to some of my students. The key part is the
animated class which actually starts the animation: it is only added once the element is in view.
Note that the event handler is not debounced as we need to actually trigger the animations on actual scroll. Is partially optimised by removing the event handler once all elements are visible. Could be further optimised by throttling the event handler.
I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!
UPDATE June 2016: For a project I’m building I need the animations to reverse when scrolling up. And so I build’eth.