You’ve probably encountered websites with various animations happening as you scroll down (On Scroll Animations). So, I’ll share with you a library I came across called AOS, which allows you to easily add these animations with full CSS control over them.
The concept behind AOS is quite simple: track all the elements and their positions according to the settings you provide, and then add/remove the aos-animate class that triggers the animation for the relevant element.
“Actually, it’s not as simple as it sounds,” notes the developer of the plugin, but the idea behind this library itself is straightforward, and every aspect of animation is managed through CSS only.
How to Use the AOS Library?
To start, you need to include the necessary files for AOS to work. Add the stylesheet file to the <head> of your page:
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />Then, add the required script just before the closing </body> tag:
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>I won’t explain here how to add these in WordPress, as I’ve covered that extensively in previous posts with lots of examples. You’re welcome to take a look at the post on Adding CSS and JS to WordPress Sites. If you’re struggling, feel free to ask in the comments, and I promise to respond.
To save you time, you can download both relevant files from this link.
Initializing the AOS Library
To initialize the library, use the following code:
AOS.init();
AOS has several options, which I won’t expand upon here. The comments in the code provide excellent explanations.
Adding Animation to HTML Elements
Let’s take a look at an example of how to add animation to any HTML element. Assuming you’ve loaded the library correctly, adding animation to an element is done like this:
<div class="some-item" data-aos="fade">Example Element</div>The result will be something like this (according to the CSS of that element):
Or, for instance, the same example but with a longer animation duration:
<div class="some-item" data-aos="fade" data-aos-duration="2500">Example Element</div>The result:
You probably understood that the attribute
data-aos is responsible for the type of animation. Let’s change the animation for demonstration purposes:
<div class="some-item" data-aos="flip-left" data-aos-duration="1500">Example Element</div>And here’s the result:
You can also set a delay for elements using the
data-aos-delay parameter. Here are three buttons with short delays between them:
<div class="buttons-aos">
<button class="aos-button" data-aos="fade-up" data-aos-delay="0" data-aos-easing="ease-in-out">Button</button>
<button class="aos-button" data-aos="fade-up" data-aos-delay="500" data-aos-easing="ease-in-out">Button</button>
<button class="aos-button" data-aos="fade-up" data-aos-delay="1000" data-aos-easing="ease-in-out">Button</button>
</div>Here’s how it looks:
Adding Your Own Animation to AOS
If the animations provided by the library aren’t enough and you want to add your own animation to AOS, it’s quite simple since all animations are performed through CSS.
[data-aos="new-animation"] {
opacity: 0;
transition-property: transform, opacity;
}
[data-aos="new-animation"].aos-animate {
opacity: 1;
}
@media screen and (min-width: 768px) {
[data-aos="new-animation"] {
transform: translateX(100px);
}
[data-aos="new-animation"].aos-animate {
transform: translateX(0);
}
}
You can then use this animation like this:
<div data-aos="new-animation"></div>That’s it. You can find more information about the library’s options, available animations, and all parameters on the AOS GitHub page.
