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:

Then apply it like any other AOS animation to the HTML:

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

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">