The worst part of adding animation using animate.css was that – all the animations added to a web page are played once that page is loaded. Animations below the above-fold (top part of a website that is visible without scrolling) are also played and that’s why you can not see them in action if you scroll down the page. I have been figuring out there must be a way to trigger (reveal) the animation only when the page is scrolled. And Here we go with awesome wow.js
What are we going to do?
- Adding the CSS stylesheet and JS into the theme
- Calling the scripts in the theme functions
- Moving the scripts to footer
- Do function that triggers the animate.css animation when you scroll down the page
Ingredients?
- cPanel Access/FTP Access will also do the work
- Normal understanding of core WordPress theme files
- Some basic HTML and CSS knowledge
Implementing the Animations when Scroll
#1–Download Files
Let’s prepare the files that are required for this.
Download animate.min.css and wow.min.js and save. You can open these link as press CTRL + s to save these files.
#2–Upload in your Theme folders
I will simply be locallizing the animate.css and wow.js in the theme files so that it can also work with your caching plugin.
Now you have to upload these files in your theme.
- Step1. Open cPanel
- Step2. Go to File Manager
- Step3. Follow this path – public_html/wp-content/themes/current-theme/js
- Step4. Upload the wow.min.js here
- Step5. Now get back to current theme folder and open css/ folder
- Step6. Upload animate.min.css here
Done
#3–Invite the Script and Fire them in functions.php
For better results, create a child theme and in the functions.php of the child theme, Do the following. Editing the parent theme’s functions.php itself will also do the work. However, creating a child theme is recommended.
- Step1. Go to your WordPress admin dashboard
- Step2. Appearance >> Editor
- Step3. Find functions.php
- Step4. Paste the following code at the end of functions.php
//* 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>
new WOW().init();
</script>
<?php }
- Step5. Save the file.
Done
#4–Forget the old CSS rules and Use this Now
If you were adding animations like this <div class=”animated bounce”>, then forget it.
Here is the new instance you have to add to an HTML element that you want to animate when visible.
<div class=”wow bounce”>Here is the content that will be animated when scroll.</div>
All set, it was super easy. Right?
To Add these scroll animations in your theme
you can follow this tutorial from Step 3 keeping in mind that there is new rule where you just have to replace “animated” with “wow”
Now I will add some images and put this kind of animation effect. I have already uploaded and called the animate.css and wow.js in my current theme.
Above animations are only fired when you scroll down the page. And this was possible only because of wow.js. Otherwise, all animations were being fired when the page once opened. That’s why there was no animation in the content below above-fold.
Wrapping Up
While I expect it helps several, you can drop a comment if you adjudicated above tutorial. I would like to know if it worked for you? If not, what quandary you encountered.
