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.

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>

Read more here: Wow Js not working properly with WordPress


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , , ,

Wordpress related questions and answers: