Velocity is a jQuery plugin that re-implements $.animate() to produce significantly greater performance (making Velocity also faster than CSS animation libraries) while including new features to improve animation workflow. Velocity includes all of $.animate()’s features while packing in color animation, transforms, loops, easings, sequences, and scrolling. Velocity is the best of jQuery, jQuery UI, and CSS transitions combined.
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.
A jQuery/Zepto plugin I’ve been using a lot lately to debounce (= attach with delay) event handlers. To be applied on scroll events for example, as you don’t want one long single scroll to pull down the performance of your webpage by constantly triggering the attached handling function.