**** QUICK CHEESY ASK, THESE BLOG TAKE TIME, IF YOU LIKE THEM WOULD YOU PLEASE CONSIDER LIKING MY FACEBOOK PAGE? JUST PRESS LIKE BELOW!****
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:
- You want to add more animations to your site (animate.css makes this really easy)
- You want those animations to work when revealed by scrolling
- You are willing to buy wow.js
If those sound like something you want, then it’s surprisingly easy to do.
The Short Version:
- Click on this super clear “how to install wow.js and animate.css in wordpress” link by Jeremy Cookson.
- Follow those instructions.
- Add the ‘wow’ class to any module
- Add the relative animate.css name to any module.
The Longer Version:
- Create a subfolder in your child theme called css
- Place animate.min.css there.
- Create a subfolder in your child theme called js
- Place wow.min.js there.
- 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.
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.
Hello Logan,
I have read with enthusiasm this post and everything is reproduced and it does not work. I know you have no glass ball, but maybe you know the mistakes that are made in the implementation and have a tip for me. I have it with the “short version” LOL also checked, would be nice if you could help me.
Thanks in advance
Bernd from Berlin
Hi, Bernd,
What is the site URL? I’ll take a peek at the front end and see if anything stands out. Some basics to double-triple check are file paths and functions.php modifications.
Running a child theme?
L
Hi Logan,
Great article, but I seem to be having the same issue with the getting this to work with Divi as Bernd S.. I have followed the article and verified all content is in the correct location.
I am using a child theme with the latest version of Divi Theme. One thing I have not been able to find is a way to turn off animation. Everything else is just as your article and video.
I am testing this on a demo site at http://labpages.hlehosting.us.
If you could take a look at the site and see what may be happening I would greatly appreciate you help!!
Hank L.
What is code in functions.php? I’ve seen issues with copy/paste from web where the single quote (‘) comes out as a ` or other symbol, screwing things up…I looked at the site link and don’t see any console errors (obviously a good thing), but if you’re sure the file paths are good, then it has to not be called correctly in functions.php and/or the classes are not assigned (?)
I tried everything, but this doesn’t seem to work for me. You can go to the website I linked and check if it works on your side but it doesn’t work for me for the pictures or anything else.
You have some errors on the site (Chrome –> Dev Tools –> Console). Fix those and then see what happens, Amigo.