I’m not big on animations. Mostly because I believe most users don’t care, but also because I think they are over-used (which is no surprise given the micro interactions trend).  Of course, that is not to say they are irrelevant.  I’m a fan.  Just not a big one.  So in that regard, I’ve always appreciated the simple Divi options available, which are basically fade, slide, or none.

They are simple and effective and, to boot, you can make those simple and effective animations available on any module (or section or row) by using the built-in Divi classes. (More on that on this Quiroz article or this Webulle one.)

However, sometimes you do want more or, at least, different animations and in spite of my aforementioned opinion I have a crush on animate.css. I have used it a few times on a few sites, but always on modules in the initial viewport (like getting the logo to bounce on this site build) because I have not been able to get animation to occur on scroll. So applying animate.css classes like ‘bounceIn’ to a blurb module down the page will cause that module to animate on page load…way down below where the user doesn’t sees it. And when they scroll down, they do not see the animation (because it already occurred).

And then I came across wow.js by Matt Aussaguel, which has the title “Reveal Animations When Scrolling.” Yup, that sounds right. From what I can tell in their licensing agreement, you will need to purchase it to use it in the wild, but this blog example fits under their free license so let’s get it going!

Ok, so before I show the code (which is really just a link to this Jeremy Cookson page), let me sum who might want to use this solution:

1. You want to add more animations to your site (animate.css makes this really easy)
2. You want those animations to work when revealed by scrolling
3. You are willing to buy wow.js

If those sound like something you want, then it’s surprisingly easy to do.

The Short Version:

1. Click on this super clear “how to install wow.js and animate.css in wordpress” link by Jeremy Cookson.
2. Follow those instructions.
3. Add the ‘wow’ class to any module
4. Add the relative animate.css name to any module.

The Longer Version:

1. Create a subfolder in your child theme called css
2. Place animate.min.css there.
3. Create a subfolder in your child theme called js
4. Place wow.min.js there.
5. Add the following lines to your child theme’s functions.php file

//* Enqueue Animate.CSS and WOW.js
add_action( ‘wp_enqueue_scripts’, ‘sk_enqueue_scripts’ );
function sk_enqueue_scripts() {
wp_enqueue_style( ‘animate’, get_stylesheet_directory_uri() . ‘/css/animate.min.css’ );
wp_enqueue_script( ‘wow’, get_stylesheet_directory_uri() . ‘/js/wow.min.js’, array(), ”, true );
}

//* Enqueue script to activate WOW.js
add_action(‘wp_enqueue_scripts’, ‘sk_wow_init_in_footer’);
function sk_wow_init_in_footer() {
add_action( ‘print_footer_scripts’, ‘wow_init’ );
}

//* Add JavaScript before </body>
function wow_init() { ?>
<script type=”text/javascript”>
new WOW().init();
</script>
<?php }

And there you go!  From them on you can apply the class ‘wow’ to get the scroll function and then any animate.css class to get the effect.

Here’s a video.

Build Beautiful.

Logan Ramirez

Native Texas, Logan Seth Ramirez is a computer science graduate from Trinity University and lives in San Antonio with his wife and four children. Along with being a web hero, he authored The Groom Wore White Socks, sings and songwrites as Logan Seth, and his favorite Spanish word is cacahuates.