<p>Let's recreate the navigation bar from the previous tutorial with alpinejs but with JavaScript.</p>
<p>Read the article <a target="_blank" href="https://lexingtonthemes.com/tutorials/how-to-create-an-animated-navigation-with-javascript/">See it live and get the code</a></p>


Let's recreate the navigation bar from the previous tutorial with alpinejs but with JavaScript.

Read the article [See it live and get the code](https://lexingtonthemes.com/tutorials/how-to-create-an-animated-navigation-with-javascript/)

How to create an animated navigation on scroll with Tailwind CSS and JavaScript

Why animate the navigation bar though?

The sctructure

Let's get to the script

Event Listener for DOM Content Loaded

Selecting Elements

Updating Header

Event Listeners

Update Header Function

Update Text Colors Function

Update Title Color Function

The full script

Conclusion

✺ UI Designer & Front end dev working on lexingtonthemes.com


A bi-weekly newsletter for web developers and UI/UX designers discovering new resources and articles about the latest and relevant trends.

How to create an animated navigation on scroll with Tailwind CSS and JavaScript

Table of contents