Navigation Button Animation
Navigation Button Animation

Hy Guys, Today we are going to create cool looking animated navigation button. Navigation is the most important part of both Websites & Apps. Here we will create Navigation Button Animation for the Website. Let’s Start Our Work!

Table of Contents

This is a cool navigation button animation you can use in your web project. When you click on the navigation icon the small light red circle comes under that icon and bounces both icon and circle. The icon comes in the center of the circle and changes its color to white then both come down, the icon stays in the middle of the navigation tab and the circle goes down.

To copy the code, just click on the code it will be copied. If you are having any issue with the code then Github Link is given below.

This is a great way to animate the navigation menu. With just a little JavaScript, you will get a menu that is animated with every click. Animation gives an extraordinary look to a website. It shows the hard work & dedication of the creation.

For this animated navigation, we need to create three files, index.html, style.css, and script.js, create the files and paste the given code to their respective files.

index.html

<!DOCTYPE html>
<head>
<title>Navigation Button Animation</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
</head>
<body>  
    <div class="container">
  <svg id="box" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
  </svg>

  <svg id="home" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
  </svg>

  <svg id="calendar" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
  </svg>
  
  <div class="fake">
    <div class="circle"></div>
  </div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Here our index.html file is created now create paste the style.css code.

style.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;600;700&display=swap");
body {
  background-color: #DDDDDD;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
}
body .container {
  background-color: white;
  width: 320px;
  height: 120px;
  border-radius: 30px;
  box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 60px;
}
body .container svg {
  height: 40px;
  width: 40px;
  stroke: #ff5157;
  cursor: pointer;
  z-index: 10;
}
body .container .fake {
  position: absolute;
  width: 350px;
  height: 120px;
  bottom: 0;
  padding-top: 300px;
  padding-left: 30px;
  padding-right: 30px;
  overflow: hidden;
  left: 50%;
  transform: translate(-50%);
  pointer-events: none;
}
body .container .fake .circle {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  background-color: #ff5157;
  position: absolute;
  bottom: -50px;
  box-shadow: 3px 4px 7px rgba(0, 0, 0, 0.3);
}

style.css file is also created now paste the code of script.js file.

script.js

let isRunning = false;

function animateCircle(distance, icon) {
  let t1 = gsap.timeline();

  if (!isRunning) {
    isRunning = true;
    t1.eventCallback("onComplete", function () {
      isRunning = false;
    });

    gsap.to(
      ".container",
      1.5,
      {
        ease: "elastic.out(.4, 0.3)",
        scale: 0.7
      },
      0
    );

    gsap.to(
      ".container",
      1.5,
      {
        ease: "elastic.out(.4, 0.3)",
        scale: 1
      },
      0
    );

    t1.to(".circle", 0.4, {
      ease: "elastic.out(.4, 0.3)",
      y: 0
    });

    t1.to(".circle", 0.3, {
      ease: "power1.inOut",
      x: distance
    });

    t1.to(
      `#${icon}`,
      0.8,
      {
        ease: "elastic.out(.4, 0.5)",
        y: -160
      },
      0.7
    );

    t1.to(
      ".circle",
      1,
      {
        ease: "elastic.out(.4, 0.3)",
        y: -140
      },
      0.7
    );

    t1.to(`#${icon}`, 1, {
      ease: "elastic.out(.4, 0.3)",
      y: -66,
      stroke: "white"
    });

    t1.to(
      ".circle",
      0.6,
      {
        ease: "elastic.out(.5, 0.3)",
        y: -135
      },
      1.9
    );

    t1.to(
      ".circle",
      0.4,
      {
        ease: "power1.inOut",
        y: -140
      },
      2.1
    );

    t1.to(
      `#${icon}`,
      1,
      {
        ease: "elastic.out(.4, 0.3)",
        y: 0,
        stroke: "#ff5157"
      },
      2.6
    );

    t1.to(
      ".circle",
      1,
      {
        ease: "elastic.out(.5, 0.3)",
        y: 0
      },
      2.6
    );
  }
}

let box = document.querySelector("#box");
let home = document.querySelector("#home");
let calendar = document.querySelector("#calendar");

box.addEventListener("click", function () {
  animateCircle(0, "box");
});

home.addEventListener("click", function () {
  animateCircle(140, "home");
});

calendar.addEventListener("click", function () {
  animateCircle(280, "calendar");
});

Here we had created all the files now just run the code and see the magic.

Code is also available on Github Click Here!

If you enjoyed this blog then comment on us and share it with your friends. And subscribe to our newsletter (given below).

I think you are interested in coding, so you want to learn more! Here we have created an Animated Download Progress Button. Click on the link and create another amazing animation in HTML, CSS, and JavaScript.

We are daily posting web development content on our Instagram accounts. Visit the account and see our work!
RareProgrammer
CodeDesignerWorld

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply