Animate + WOW not working

[Marcus08]

Hi there,

I hope you guys can helpt me with this.

I added this code in het head (using header and fouters plugin):

` ’

It works just fine. However I want to activate the animation on scroll using wow.js. but it is not working.
This is the code they provide (https://wowjs.uk/docs):

          <script>
          new WOW().init();
          </script>

Where do I put this code? I’m using Pro with a child theme.

Thx in advanced!

[jade]

Hi Marco,

Please install and activate the child theme and login through FTP then edit the functions.php then add this code:

add_action('wp_head', 'add_header_code');
function add_header_code(){
?>
          <script>
              new WOW().init();
          </script>

    <?php
};

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[Marcus08]

Wow, I wanted to edit my question and you already replied. This is just great
Unfortunately it is still not working…

[jade]

Hello Marco,

I have just checked the link you send and aside from the script code, you also have to include the wow JS library and the CSS that comes with it.

You may update the code I previously provided to:

add_action('wp_head', 'add_header_code');

function add_header_code(){
?>
         <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/animate.css">
         <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/wow.min.js"></script>
         <script>
             new WOW().init();
         </script>

   <?php
};

However, you have to make sire that the animate.css and the wow.min.js is pointed to the correct directory where those files are.

Based in the code above, you have to have animate.cssin wp-content/themes/x-child/css then wow.min.js in wp-content/themes/x-child/js. You can set this directories when you login through FTP.

Please also note that since this is not something related to the theme but a customization, we cannot provide further support but the information previously mentioned should help you get started.

Hope this helps.

[Marcus08]

Hi,

Thx for your fast reply but it is still not working
Animations are still not triggered on scroll. I use the classs wow animated slideInUp
The animation works fine

[rad]

Hi Marco,

As Jade recommended, the file should be placed in the correct path. This is what I’m getting

And it has non-existing path https://***********.design/wp-content/themes/pro-childjs/wow.min.js, the correct one is https://***********.design/wp-content/themes/pro-child/js/wow.min.js. Please make sure the code is as this format <?php echo get_stylesheet_directory_uri(); ?>/js/wow.min.js and not <?php echo get_stylesheet_directory_uri(); ?>js/wow.min.js.

Thanks!

[Marcus08]

Thx Rad, that did the trick.

Also I had a wrong wow.js file. Downloaded another one and everything is working perfect!

Thx for giving support on a third party script. Your support and theme is awesome!

[jade]

Thank you for your kind words, Marco.

We’re glad to help.