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?
1 Answer
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?
-
The CODE is much smaller.
-
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.