Sridhar Katakam

Genesis and WordPress Tutorials

Using ScrollReveal.js to fade in posts in Genesis

by 5 Comments

While the below tutorial should work in theory, it does not. You might want to instead follow Scroll animations in WordPress using WOW.js.

Declarative on-scroll reveal animations.

A simple way to create and maintain how elements fade in, triggered when they enter the viewport.

In a previous post titled Scroll animations in WordPress using Animate.css, Jack In The Box and Waypoints, I discussed scroll animations using Jack In The Box and Waypoints.

In this article I am going to show how ScrollReveal.js can be used to fade in posts as they are scrolled to in listing pages like the Blog page and upon loading in singular pages like static Pages and Posts.

Comparing with Waypoints, ScrollReveal is in ‘experimental’ stage with more features expected to be added. Also currently the only animation available in ScrollReveal is ‘fade in’ whereas as huge number of animation effects are possible with the Waypoints + Animate.CSS combo. It is not possible to specify the elements to be animated via their selectors in ScrollReveal as it is with Waypoints. We need to add data-scrollreveal attribute to the elements.

The summary is that you might want to use ScrollReveal when you are fine with just fade in scroll animations. In spite of the experimental tag, it works just fine.

Here’s how we can set it up in WordPress:

Upload scrollReveal.min.js to your child theme directory/js.

Load it before closing body tag by adding this in functions.php:

//* Enqueue ScrollReveal.js
add_action( 'wp_enqueue_scripts', 'enqueue_scrollreveal' );
function enqueue_scrollreveal() {
wp_enqueue_script( 'scrollreveal', get_stylesheet_directory_uri() . '/js/scrollReveal.min.js', array( 'jquery' ), '', true );
}
view raw gistfile1.php hosted with ❤ by GitHub

Now ScrollReveal is ready and looking for any element having the attribute of data-scroll-reveal. But how do we add this to each post in Genesis? Using the genesis_attr_entry filter.

add_filter( 'genesis_attr_entry', 'custom_genesis_attributes_entry' );
/**
* Add attributes for entry element.
*
* @since 2.0.0
*
* @global WP_Post $post Post object.
*
* @param array $attributes Existing attributes.
*
* @return array Amended attributes.
*/
function custom_genesis_attributes_entry( $attributes ) {
global $wp_query;
if ( ($wp_query->current_post > 0) )
$attributes['data-scroll-reveal'] = 'enter from the left over 1.5s';
if ( is_singular() )
$attributes['data-scroll-reveal'] = 'enter from the top over 1.5s';
return $attributes;
}
view raw gistfile2.php hosted with ❤ by GitHub

We are setting each entry to enter from the left over 1.5s. And for single entries like static Pages and Posts, to enter from the top over 1.5s.

With

if ( ($wp_query->current_post > 0) )

we are adding the data-scrollreveal attribute only from second (from top) post onwards because it does not make sense to apply fade in animation effect to the top most post. If the above conditional is commented out or removed, what will happen is that when the webpage is loaded, the top most will appear at first, then again fade in and we do not want this.

In cases where you have full content instead of excerpts appearing in the blog, if a post is very long then the animation will not appear instantly when the top of that post is in viewport. In such cases, edit the .js file and change the value in viewportFactor: 0.33 to a lower value like 0.1 or 0. Click here for a discussion on this where I explained the problem via a screencast. In my demo video, I have this set to 0.

Source: themes/genesis/lib/functions/markup.php

    • >