I’ve been rebuilding a WordPress site that was originally set up using a popular ThemeForest theme and Visual Composer. The theme made it really easy to add animation effects that occur on scroll (as specific elements come into view), but extracting the code for animations wasn’t super easy (it’s part of a 600kb javascript included by theme and mixed with inline styles from Visual Composer).

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:

<?php
wp_enqueue_script(
'prefix-scrollreveal',
get_template_directory_uri() . '/js/scrollreveal.min.js',
array(),
'1.0.0',
true
);
view raw functions.php hosted with ❤ by GitHub

And call then call it on the elements you’d like to animate on scroll.

Customize Animations

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:

<div class="product" data-animation="true" data-duration="1000" data-scale="0.9" data-opacity=".8" data-distance="40px">
<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/product.png">
</div>
view raw markup.html hosted with ❤ by GitHub

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:

// Initialize Animations
// https://github.com/jlmakes/scrollreveal
animationsInit: function() {
window.scrollreveal = ScrollReveal();
$('[data-animation]').each( function() {
console.log( $(this) );
var settings = {
'origin' : 'bottom',
'distance' : '0',
'duration': 500,
'delay': 0,
'opacity': 0,
'scale': 1,
'reset': false
}
if ( $(this).data('distance') ) {
settings.distance = $(this).data('distance');
}
if ( $(this).data('duration') ) {
settings.duration = $(this).data('duration');
}
if ( $(this).data('delay') ) {
settings.delay = $(this).data('delay');
}
if ( $(this).data('opacity') ) {
settings.scale = $(this).data('opacity');
}
if ( $(this).data('scale') ) {
settings.scale = $(this).data('scale');
}
scrollreveal.reveal( $(this), settings );
});
}
view raw theme.js hosted with ❤ by GitHub

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.

Posted by:Devin

I’m a WordPress developer based in Austin, Texas. I run a little theme shop called DevPress and work for a startup called Nano. Find me on twitter @devinsays.

3 thoughts on “ Using Scroll Reveal for Animation Effects ”

  1. Hi Devin

    Thank you for your article on implementing scroll reveal .

    May I please ask for clarity on implementing this in WP

    1) I add the wp_enqueue_script
    2) add the attributes to the div e.g data-animation=”true”
    3) wrap this in a script tag and place in my footer animationsInit: function() {
    window.scrollreveal = ScrollReveal();

    $(‘[data-animation]’).each( function() {
    console.log( $(this) ); …..

    This is where I have got to and it is not working

    Note: scrollreveal.min.js is being loaded in my footer .

    Am I missing something?

    Kind Regards
    Brad

      1. Hi Devin

        Thank you for your reply, clarification and for taking the time to create the example javascript file.

        I will give that a go..

        Kind Regards
        Brad

Leave a Reply

Your email address will not be published. Required fields are marked *