1

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:

<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!

Beth
  • 29
  • 8

2 Answers2

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.

rnevius
  • 26,578
  • 10
  • 58
  • 86
  • Woops, I originally had it loading manually both in the footer and didn't work, so I changed it to enqueue. I fixed the error and same thing... still not working correctly. Any other ideas why this might be happening? – Beth Jan 14 '16 at 17:52
  • You should change your action hook from `wp_head` to `wp_footer` – rnevius Jan 14 '16 at 17:54
  • that's actually what I did that and it didn't change anything. I also noticed the init was loading twice so I removed sk_wow_init_in_footer() and wow_init() from functions and manually put it in footer.php after wp_footer(); no errors.. still not working correctly. – Beth Jan 14 '16 at 18:18
-3

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.**

Beth
  • 29
  • 8