Using ScrollReveal.js in a WordPress Genesis Theme

ScrollReveal.js is a javascript resource for animating objects as they appear in the viewport, here’s how to get it going in a Genesis theme for WordPress. Above are four colored balls set to animate with scrollreval each time they enter into the viewport. For the elements to animate they need to have an attribute set, data-sr=”” and the animation values are passed in between the quotes, for example the above circles are marked up like so: <div> <div data-sr=”enter left wait 2.5s and then ease-in-out 100px reset”></div> <div data-sr=”enter top please, and hustle 20px reset”></div> <div data-sr=”enter bottom and scale up 20% over 3s reset”></div> <div data-sr=”enter right wait 3.5s and then ease-in-out 100px reset”></div> </div> Description of the values here. But before this will work the script needs to be added.

Install ScrollReveal.js

Download the package and get the scrollReveal.min.js in the dist folder and move it to your js directory Then in functions.php enqueue it function themeprefix_scroll_reveal() { wp_enqueue_script (‘scrollreveal’, get_stylesheet_directory_uri() . ‘/js/scrollReveal.min.js’, array( ‘jquery’ ),’2.0.5′,true ); } add_action( ‘wp_enqueue_scripts’, ‘themeprefix_scroll_reveal’ ); As well as the main script you need an initialise script to load it. add_action( ‘wp_footer’,’unstop_scroll_reveal_fire_tut’, 105 ); //Scroll Reveal JS Fire Script function unstop_scroll_reveal_fire_tut() { if( is_single(9932)) { echo ‘ <script> window.sr = new scrollReveal(); </script>’; } }   This will now target any element with the attribute data-sr=””, if no values are passed into the attribute then some defaults are applied. These defaults can be adjusted by amending the above javascript, for example: //Scroll Reveal JS Fire Script function themeprefix_scroll_reveal_fire() { ?> <script> var config = { easing: ‘hustle’, vFactor: 0.25, mobile: true, enter: ‘bottom’, reset: true } window.sr = new scrollReveal( config ); <? } add_action( ‘wp_footer’,’themeprefix_scroll_reveal_fire’, 100 );

Page Load –  Visibility of Elements

One of the side affects of the animated elements is that they may briefly be in a static state before scrollreveal can animate them, so to combat this some inline CSS can be added just to initially hide the data-sr attribute. function themeprefix_scroll_reveal_inlinecss() { ?> <style> [data-sr] { visibility: hidden; }</style> <? } add_action( ‘wp_head’,’themeprefix_scroll_reveal_inlinecss’ );

Applying to Higher Level Elements

If you wish to apply the animations to elements whose attributes you can’t control, you can filter in these attributes. For example if you wanted to make the blog posts appear animated, we need to add the data-sr attribute  to the article element. function themeprefix_attr_entry_scrollreveal( $attributes ){ // add scrollreveal data-sr $attributes[‘data-sr’] = ‘ ‘; // return the attributes return $attributes; } add_filter( ‘genesis_attr_entry’, ‘themeprefix_attr_entry_scrollreveal’ ); Now the data-sr attribute will appear in the article element alongside the other default attributes.  – Here is a list of all the HTML elements/contexts that can be filtered for adding new attributes. These article elements would then inherit the default or amended values from the scrollreveal initialise script – if you wanted to override them you can also filter in the values function themeprefix_attr_entry_scrollreveal( $attributes ){ // add scrollreveal data-sr $attributes[‘data-sr’] = ‘enter bottom and scale up 20% over 3s reset’; // return the attributes return $attributes; } add_filter( ‘genesis_attr_entry’, ‘themeprefix_attr_entry_scrollreveal’ ); So only difference above is that the values are added . That’s about it, I am not a big fan of too much animation as it can irritate and distract the reader, like a lot of things, moderation is key. Gist Reference