Uncategorized

How to Add Scrolling Animations in WordPress

By May 29, 2014 13 Comments

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>

 

13 Comments

Leave a Reply