The library comes with many ready-to-go animations, but one of the things I really like about this small library is that you can create your own CSS animations as well.
Note: I won’t go over how to use the library, as it’s well documented.
Creating a Custom Animation
Here’s an example where I created an animation called “nav-animation”.
First, create the animation like this in your own CSS:
Custom CSS animation for AOS
Then apply it like any other AOS animation to the HTML:
Applying the animation to HTML
<nav class="nav" data-aos="nav-animation">
The following are some examples of using custom animations applied to a nav bar.
Fix Navigation When it Reaches the Top
This example uses AOS to switch from
position: absolute to
position: fixed once the navigation reaches the top.
See the Pen Navigation Animation with AOS 3 by Alicia Ramirez (@coopersita) on CodePen.36477
Animate Fixed Navigation
These examples are a bit more complex, where the navigation is already fixed, but once the first section of the page reaches the top, the navigation animates into a different style. This is done by setting the
data-aos-anchor to a different element.
See the Pen Navigation Animation with AOS by Alicia Ramirez (@coopersita) on CodePen.36477
See the Pen Navigation Animation with AOS 2 by Alicia Ramirez (@coopersita) on CodePen.36477