Creating an Animated Navbar with GSAP

By the end of this guide, you'll understand how to create animation sequences with GSAP and control them with JavaScript. Let’s get started!

You can check out the Source Code in the Github:- Click Here

Why GSAP for Animations?

When creating dynamic user interfaces, adding smooth animations can greatly enhance the user experience. GSAP offers:

Powerful performance across all devices and browsers.
Simple syntax for creating complex animations.
Flexibility to animate almost any aspect of your web page.

Using GSAP, you can easily manage the timing, sequencing, and interactivity of your animations.

What You’ll Learn in This Project

How to set up a simple HTML, CSS, and JS structure
The basics of creating animations using GSAP
How to make a sliding navbar that responds to user clicks

Let’s start!

Project Setup

Before we dive into the code, let’s lay out the basics of what we’ll build. Our navbar will be hidden by default and slide in from the right when the user clicks the "MENU" icon. Inside the navbar, we’ll have navigation links and a close button.

Step 1: Setting Up the Project

First, let’s create the basic structure for our project. You’ll need three files:

index.html – for the HTML structure.
style.css – for the CSS styling.
script.js – for the JavaScript and GSAP animations.

You're setting up your project by including the HTML, CSS, and JavaScript files, and linking the GSAP and Remix Icon CDNs. You create a basic structure by adding a #main div with full height and width (100% each). This sets the foundation for your layout.

In your index.html file, add the following boilerplate:

HTML

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated Navbar</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css" rel="stylesheet">
</head>
<body>
  <div id="main">
    <!-- Content will go here -->
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Why?: You include the necessary CDNs for GSAP animations and the Remix Icon library, then create a basic structure that will later house the animated navbar and main content. Here, we’ve included the GSAP and Remix Icon CDNs. These are necessary for our animations and icons.

Step 2: Adding the Background Image

You pick a background image for the #main div, using CSS to set background-size: cover and background-position: center. This ensures the image fully covers the background and stays centered.


#main {
  height: 100vh;
  width: 100%;
  background-image: url('your-image-path.jpg');
  background-size: cover;
  background-position: center;
}

Why?: The background image will always cover the screen, and background-position: center keeps it centered regardless of screen size.

Step 3: Creating the Navbar

You create a #nav div inside #main. Inside #nav, there's an h2 element with the text "Code Cluster" and a menu icon (from Remix Icon) (You can write your title in h2 and choose any different icon if you want)

<div id="nav">
  <h2>Code Cluster</h2>
  <i class="ri-menu-2-line"></i>
</div>

In the CSS, #nav is set up as a flex container, with align-items: center and justify-content: space-between to position the h2 and icon on opposite sides. You give it padding (40px 50px) and a white color. The font sizes and weights are adjusted for the h2 and the icon (font-size: 30px, font-weight: 800), making them large and bold.

#nav {

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 50px;
  color: white;
}

#nav h2 {
  font-size: 30px;
}

#nav i {
  font-size: 30px;
  font-weight: 800;
  cursor: pointer;
}

Why?: Using Flexbox allows you to easily position the logo and menu icon, while padding and font sizes ensure the elements look consistent and well-aligned.

Step 4: Creating the Side Navbar (The Full Menu)

You create a #full div, which contains the actual nav links (like Work, News, Courses, Services, Contact Us) as h4 elements. In the CSS, you style #full to cover the right side of the screen (with width: 40%, height: 100%, and position: absolute). You place it on the right edge with top: 0 and right: 0. The background is white with 50% transparency, and you add a backdrop-filter to blur the background behind the #full div, enhancing the focus on the menu items. Padding is used to ensure the text is well spaced, and flex layout can be applied for better alignment

  <h4>Work</h4>
  <h4>News</h4>
  <h4>Courses</h4>
  <h4>Services</h4>
  <h4>Contact Us</h4>
  <i class="ri-close-line"></i>
</div>

Now, style the side navbar in style.css:

#full {
  height: 100%;
  width: 40%;
  position: absolute;
  top: 0;
  right: 0%;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#full h4 {
  font-size: 50px;
  font-weight: 500;
  margin-bottom: 10px;
}

#full i {
  position: absolute;
  top: 5%;
  right: 10%;
  background-color: white;
  border-radius: 50%;
  padding: 5px;
  font-size: 25px;
  font-weight: 600;
  cursor: pointer;
}

Why?: The transparent background and blur effect make the navigation links stand out when the menu slides in. The positioning ensures it covers 40% of the screen, appearing from the right.

Step 5: Prevent any horizontal scrolling

To hide the #full div, you move it off the right side of the screen by changing right: 0 to right: -40%. This effectively makes the navbar disappear to the right. To prevent any horizontal scrolling, you add overflow-x: hidden to the body, ensuring it stays out of view until triggered.

body {

    overflow-x: hidden;

}

#full {

    right: -40%;

}

Why?: Initially hiding the menu allows it to be revealed only when triggered. 
The smooth transition effect creates an elegant sliding animation.

Step 6: Animating the Navbar with GSAP

GSAP Timeline: You create a gsap.timeline() object. This timeline (tl) allows you to chain multiple animations in sequence. The timeline object helps to manage and control animations more easily. It helps to organize and control the flow of animations.

var tl = gsap.timeline();

Next, let’s animate the side navbar using tl.to:

tl.to('#full', { 
    right: 0, 
    duration: 0.8,
});

Explanation of `tl.to`:

`tl.to()`

What it does: The .to() method animates properties from their current or default values to the specified target values.
Usage: You specify the element(s) you want to animate and the end values of the properties.

tl.from('#full h4', {

x: 150,

stagger: 0.28,

opacity: 0

});

tl.from('#full i', { 
    opacity: 0 
});

Explanation of `tl.from`:

`tl.from()`

What it does: The .from() method animates properties from specified values to their current or default values.
Usage: You specify the starting point of the animation, and GSAP will animate back to the element's current values (usually the values set in your CSS or DOM).

Why?: The tl.to() method brings the hidden menu into view by animating its right property from -40% to 0. The tl.from() method animates the menu items and the close icon, making them fade in with staggered timing.

Step 7: Controlling the Animation with JavaScript

Initially, the animation plays as soon as the page loads, which isn’t how a navbar should work. To prevent that, you pause the timeline with tl.pause(), ensuring that it waits for user interaction, tl.pause();

Next, select the menu and close icons using querySelector:

var menu = document.querySelector('#nav i');
var cross = document.querySelector('#full i');

Add event listeners to control the animation:

menu.addEventListener('click', function() {
  tl.play();
});

cross.addEventListener('click', function() {
  tl.reverse();
});

Explanation:

tl.play() starts the timeline, showing the navbar when the menu icon is clicked.
tl.reverse() reverses the timeline, hiding the navbar when the close icon is clicked.

By following this guide, you’ve built a smooth, animated navbar using GSAP with just a few lines of JavaScript and CSS. Not only does this demonstrate the power of GSAP, but it also shows how easy it is to add engaging animations to your projects.

Now it’s time for you to showcase your work! Post your animated navbar on LinkedIn and tag Code Cluster. Share your journey with others and continue building awesome projects.

If you have any questions or run into any issues, drop a comment below! Let’s keep learning and building together.

Happy coding! 😎

- By

Gulshan Kumar

ISE 2nd Year (2024)

Search This Blog

Code Cluster