Wow.js on WordPress loading some animations on page load and others not at all

0 Views

I’m trying to use wow.js on my WordPress site and I’ve been through a handful of forums about similar issues but I can’t seem to get it working. The site of icons on top I believe are loading on the page load not scroll and further down on the page (under the green band) I have an h2 that never loads at all when scrolling down to it. (The animated class is added, but element is hidden and no animation occurs).

My html:

Read More
<h1 class="wow animated fadeInRight left">A website must perform many   
functions.</h1>

In functions.php 

function sk_enqueue_scripts() {
wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/js/animate.css' );
wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.js', array(), '', true );

}

add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );


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


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

Thanks in advance!

Post Views: 0

Related posts

2 comments

  1. You have an error:

    Uncaught ReferenceError: WOW is not defined

    …because you’re enqueueing wow.js in the footer, and are trying to use WOW in the head.

  2. Been searching for a while.. trying different suggestions. Finally got it working following this tutorial.

    http://www.jeremycookson.com/how-to-add-scrolling-animations-in-wordpress/

    Here is the code I replaced in my functions file. 

    //* Enqueue Scripts
function sk_enqueue_scripts() {
wp_enqueue_script( 'myscripts', get_stylesheet_directory_uri() . '/js/scripts.js', array(), '', true );
wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.js', array(), '', true );
wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/js/animate.css');
}
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );

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


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

    I’m not sure what changed other than I moved my scripts.js file to be enqueued as well, when previously I was manually loading it in footer.php

    *****UPDATE I also noticed that removing 

    html,body{height:100%;}

    may have made a difference in WOW determining when the animation was in view.**

Comments are closed.