Custom Navigation Bar Animations with AOS

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.

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