However, after testing a few different libraries, I found Scroll Reveal worked best as a replacement (3k minified & gzipped).
Basic Set Up
If you want to use Scroll Reveal with default settings, just enqueue it in your theme:
[gist id=”aad496470af20910f4009380d94a1bb4″ file=”functions.php” show_line_numbers=”0″]
And call then call it on the elements you’d like to animate on scroll.
The theme I’ve been rebuilding needed unique animations on multiple elements (custom zooms, durations, scaling, delays, etc.), which I didn’t want to set up as individual Scroll Reveal calls. Instead, I decided to use data attributes which could be applied directly in the markup.
Here’s an example:
[gist id=”aad496470af20910f4009380d94a1bb4″ file=”markup.html” show_line_numbers=”0″]
Any element that has the data attribute “data-animation”, will be animated by Scroll Reveal. The other data attributes “scale”, “opacity”, and “distance” override Scroll Reveal defaults.
Here’s how you can initialize Scroll Reveal to use data attributes:
Scroll Reveal used to support data attributes by default, but no longer does. So hopefully this helps simplify things if you’re also needing to set up a site with with multiple unique Scroll Reveal animations.