Animations are not being triggered on Scroll

Question

I have called the animate.css and Wow.js in my theme.

//* Enqueue Animate.CSS and WOW.js
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
function sk_enqueue_scripts() {


wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/css/animate.min.css' );


wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.min.js', array(), '', true );


}


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

Now Implemented it on the HTML using a text widget like this

<div class="wow bounceInUp">The image I have added here.</div>

But when I load my website and scroll down to the image, there is no animation triggered.

You can check it live at https://vashishthakapoor.com

I just want to know if I am doing everything right or not.

If I have done it right, why animations are not showing?

Answer 1

I think you have placed your CODE alright. Perhaps you need to clear browser cache to see the animation in action. In your site I can see it's working.

Note: Although your CODE will work, it's better to use it in the following manner if you have WordPress 4.5 or above:

add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
function sk_enqueue_scripts() {
    wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/css/animate.min.css' );
    wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.min.js', array(), '', true );
    wp_add_inline_script( 'wow', 'new WOW().init();' );
}

Why?

1. The CODE is much smaller.

2. Using wp_add_inline_script that way guarantees that the initialization call will run just after the required external /js/wow.min.js JavaScript file.