WOW.js not working properly with WordPress

So I’m trying to get wow.js (and Animate.css) working on my WordPress templates. I’ve got them all linked up fine (it throws no errors) and the animations do work but for some reason the animations are triggered on page load and not on page scroll. The affect is that all the animations begin when the page is loaded. I believe there is something wrong with wow.js somewhere but I can’t seem to find out what.

Heres my code. Thanks in advance.

Read More

In functions.php:

function theme_styles(){
    //Add any css style sheets here
    wp_enqueue_style('animate', get_template_directory_uri() .'/css/animate.min.css');
}
function theme_js(){
    wp_enqueue_script('wow', get_template_directory_uri() .'/js/wow.min.js',array(),'',true);
}

//Adds all style sheets above to wp
add_action('wp_enqueue_scripts', 'theme_styles');
//Adds all javascript above to wp
add_action('wp_enqueue_scripts', 'theme_js');

In footer.php:

<?php wp_footer(); ?>

<script type="text/javascript">     
var wow = new WOW(
  {
    boxClass:     'wow',      // animated element css class (default is wow)
    animateClass: 'animated', // animation css class (default is animated)
    offset:       0,          // distance to the element when triggering the animation (default is 0)
    mobile:       false        // trigger animations on mobile devices (true is default)
  }
);
wow.init();
</script>

I have also tried to initiate wow using another method(in functions.php), But that doesn’t work either:

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

In Page templates (front-page.php as an example):

<div class="container-fluid">
    <header class="row">
        <h1 class="wow fadeInDown">Delivering high quality professional websites for small to medium sized businesses in and around Bournemouth</h1>
    </header>
</div>

Related posts

Leave a Reply

1 comment

  1. Enqueuing wow.init() and adding wow.js as a dependency works for me:

    add_action( 'wp_enqueue_scripts', 'b5f_wow_init' );
    
    function b5f_wow_init() {
        wp_register_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.min.js' );
        wp_enqueue_script( 'my-wow', get_stylesheet_directory_uri() . '/js/my-wow.js', array( 'wow' ), null, true );
        wp_enqueue_style( 'wow-css', get_stylesheet_directory_uri() . '/css/animate.min.css' );
    }
    

    And my-wow.js as default values:

    var wow = new WOW(
      {
        boxClass:     'wow',      // animated element css class (default is wow)
        animateClass: 'animated', // animation css class (default is animated)
        offset:       0,          // distance to the element when triggering the animation (default is 0)
        mobile:       false        // trigger animations on mobile devices (true is default)
      }
    );
    wow.init();