You’ve gotta admit, websites that correctly use animation as you scroll down the page just feel pro. So if you’re like me and have your own WordPress theme, you start Googling how to add animation to WordPress – WITHOUT another plugin!
Guess what? The solution is easy. You can animation to your WordPress theme a lot easier than you might think by using AOS (Animate on Scroll) by Michał Sajnóg. I’ve added basic animations to the home page of Follow Hook.
Let’s not waste time! Here are the steps to integrate AOS with WordPress:
1) Enqueue JS and CSS
If you’re new to referencing javascript or CSS files in WordPress, the correct way to do it is by enqueuing them into your theme. Don’t manually place them in the header or footer of your site – as tempting as that may be!
To enqueue the files, edit the functions.php file of your theme. This is found in the root of your WordPress installation.
Add the following to your functions.php file:
add_action( 'wp_enqueue_scripts', 'add_aos_animation' );
function add_aos_animation() {
wp_enqueue_style('AOS_animate', 'https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css', false, null);
wp_enqueue_script('AOS', 'https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js', false, null, true);
wp_enqueue_script('theme-js', get_template_directory_uri() . '/js/theme.js', array( 'AOS' ), null, true);
}
You’ll need to update the above code to get the latest stable release of AOS. As of December 2020 it is: https://github.com/michalsnik/aos/tree/v2
Free Tip: I’m a Mac guy, and my favorite sFTP client is ForkLift3. Favorite code editor is Atom. These are just perfect. If you’re on the hunt, check them out!
2) Create Javascript Initialization
The first two lines use the CDN files. Now, you can also host them yourself, and then adjust the paths above. To do that, simply download the source files from Michal’s site (scroll to the bottom): https://michalsnik.github.io/aos/
The third line you added to your functions.php (theme.js) specifies a file you need to create and add to your theme. When adding AOS to a non-WordPress site, you’d initiate the script in your page with the following line:
<script> AOS.init(); </script>
For WordPress, we add this to a javascript file, and enqueue it like everything else. So in your code editor simply create a file called theme.js, and place the following line in it (don’t include the <script> tags here):
AOS.init();
Now save that in a ‘js’ folder in the root of your theme. Notice the third line that you added to your functions.php file — It is looking for a theme.js file in the template directory (your theme) and the js folder. Obviously, you can customize any of that. Just make sure the file is located where you have WordPress looking for it.
3) Use AOS in Your WordPress Theme
Now it’s time to use AOS WordPress. And this part is easy!
Example: Let’s say you have two div containers that are side by side on a page. Their classes are simply ‘box-one’ and ‘box-two.’ One has an image and one contains text. And you’re using flex-box or float to have them side by side on the page (we’re not showing that styling here).
The code would look something like this:
<div class="box-one">
<img src="myimage.jpg">
</div>
<div class="box-one">
A paragraph is here.
</div>
Add AOS Animation
Now let’s say you want to have the image box fade in from above and the text fade in from below when someone reaches this point on your page. You add AOS animation with ‘data-aos’ and then a variable like ‘fade-up.’
That same code, using AOS would look like this:
<div class="box-one" data-aos="fade-down">
<img src="myimage.jpg">
</div>
<div class="box-one" data-aos="fade-up">
A paragraph is here.
</div>
Specify AOS Duration
AOS has default times for things like delay and animation. You can adjust these inline with ‘data-aos-duration’ and ‘data-aos-delay.’ The setting is in milliseconds, and can only be a value from 50-3000 in increments of 50. Don’t make make my mistake and slap on a value of 4000 and wonder why it wasn’t working!
Here’s how the code would look to specify duration and delay:
<div class="box-one" data-aos="fade-down" data-aos-duration='1500' data-aos-delay='500'>
<img src="myimage.jpg">
</div>
<div class="box-one" data-aos="fade-up" data-aos-duration='1500' data-aos-delay='1000'>
A paragraph is here.
</div>
In the above example, the image container would animate slightly before the text container. There are other parameters you can change like offset, easing, how many times it executes, etc.
Here’s a list of all the animation attributes with random values:
data-aos="fade-up"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="false"
data-aos-anchor-placement="top-center"
4) Set Global AOS Parameters
I mentioned above that AOS has defaults built in. You can change these globally when you initiate AOS in your theme. Remember where that was? If you said theme.js you’re already at Einstein level!
Jump into that theme.js file and change it to look something like this:
AOS.init({
delay: 0
duration: 1000
});
This would tell AOS animation on your site to always have a delay of 0 milliseconds and a duration of 1000 milliseconds. But if you specify a different value inline, it will override the global defaults.
5) Visit the AOS Github Page
Now that you have AOS working with WordPress, there are tons of animation values, theme.js parameters and other things you can do! To get the full scoop, visit the official page here:
https://github.com/michalsnik/aos
Have fun with your AOS animation for WordPress!
And a tip for ACF Pro users: I use ACF to place the values in drop downs from within WP-Admin. If you’re adding this to a site where you want to easily change AOS settings for items in a page or block template, simply add the value list for a parameter using an ACF dropdown.
Thanks for reading!