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.
Did this help you out? Like what you see? Consider donating.
It certainly is no obligation but it would put a smile on my face. Thanks! 🙂
UPDATE June 2016: For a project I’m building I need the animations to reverse when scrolling up. And so I build’eth.