I’m always on the lookout for easy-to-use JavaScript libraries for my students. Recently I discovered AOS (Animate on Scroll), which makes animating elements on the page as you scroll super easy.
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:
[data-aos="nav-animation"] {font-size: 2rem;background-color: white;}[data-aos="nav-animation"].aos-animate {font-size: 1.4rem;background-color: #eee;}
Then apply it like any other AOS animation to the 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.
[codepen_embed height=”350″ theme_id=”36477″ slug_hash=”gEqVGd” default_tab=”html,result” user=”coopersita”]See the Pen <a href=’https://codepen.io/coopersita/pen/gEqVGd/’>Navigation Animation with AOS 3</a> by Alicia Ramirez (<a href=’https://codepen.io/coopersita’>@coopersita</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
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.
[codepen_embed height=”350″ theme_id=”36477″ slug_hash=”aMXQRO” default_tab=”html,result” user=”coopersita”]See the Pen <a href=’https://codepen.io/coopersita/pen/aMXQRO/’>Navigation Animation with AOS</a> by Alicia Ramirez (<a href=’https://codepen.io/coopersita’>@coopersita</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
[codepen_embed height=”350″ theme_id=”36477″ slug_hash=”aMXPWp” default_tab=”html,result” user=”coopersita”]See the Pen <a href=’https://codepen.io/coopersita/pen/aMXPWp/’>Navigation Animation with AOS 2</a> by Alicia Ramirez (<a href=’https://codepen.io/coopersita’>@coopersita</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]