Scrolling animations are effects that happen as new elements appear on screen. This means your content will be animated as you scroll down the page. When done right, this effect can totally transform your design. I love using these effects because they make the site feel more alive and interactive.

Follow these simple steps to add scrolling animations to your WordPress website. The animations are powered by WOW.js and Animate.css. All credit for the instructions goes to Sridhar Katakam. I originally learned this from his blog – I’ve just simplified the instructions a bit so it’s easier for beginners, and I included some extra options as well.

Step 1

In your directory, under your active child theme, create a new folder called “css” (unless it exists already). Download animate.min.css and upload it to your css folder.

Step 2

In your directory, under your active child theme, create a new folder called “js” (unless it exists already). Download wow.min.js and upload it to your js folder.

Step 3

Add the following code to your child theme’s functions.php:

//* 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 }

 Step 4

Now you can add animations to any element on your site using the class “wow” plus any class from Animate.CSS

Here’s an example code:

<div class="wow bounceInUp">YOUR CONTENT GOES HERE</div>

Advanced Options

data-wow-duration: Change the animation duration
data-wow-delay: Delay before the animation starts
data-wow-offset: Distance to start the animation (related to the browser bottom)
data-wow-iteration: Number of times the animation is repeated

Examples:

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">YOUR CONTENT GOES HERE</div>
<div class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10">YOUR CONTENT GOES HERE</div>

 

Recent Posts
Showing 10 comments
  • Nemanja Radevic
    Reply

    Man i followed all this and it works. Now the problem is that it only works once while i scroll down there is the effect. When i scroll up the effect is gone everything stays as it is, could you please help me? i tried data-wow-iteration=”infinite” but this i just keeps repeating even if i don t scroll so i need to know how to trigger the animation always

    • Jeremy Cookson
      Reply

      Unfortunately, I don’t think wow.js supports this feature.

  • Nemanja Radevic
    Reply

    🙁 lol it s kind of a major thing … too bad i will have to find other ways to trigger the effects

  • André Gonçalves
    Reply

    nice ! it worked like a charm. Been around this for the past 2 hours. Thanks

  • Nelly
    Reply

    It worked! Thanks Jeremy Cookson! You are so brilliant!!! 😀

  • Sabrina
    Reply

    I have been searching for instructions like this for a while. I didn’t even get this clear of directions from the gitHub author himself. Thank you so much for this!!!!! I’m so excited it worked. I was even able to use it on a nextgen gallery template, so my gallery elements bounced around. thank you, thank you!

  • Srdjan
    Reply

    Great work.

  • Beth
    Reply

    oh my you have saved me.. I have been having such a hard time for some strange reason getting this to work on my WordPress site. I had no errors.. everything was loading and it still wasn’t working! Thanks to following your tuorial.. it finally works!!! Thank you!!!

  • insightinternetMark
    Reply

    Cheers Jeremy worked first time – very well explained includes every step to get this working in your WordPress instalation – nice work!

Leave a Comment