ADVERTISEMENT

Tab Bar Animation Using HTML,CSS and JavaScript

Telegram Group Join Now

ADVERTISEMENT

Tab Bar Animation Using HTML,CSS and JavaScript

Welcome to Code With Random blog. This blog teaches us how to create an Tab Bar Animation. We use Html,Css And JavaScript for the Tab Bar Animation.

ADVERTISEMENT

Code byabxlfazl khxrshidi
Project DownloadLink Available Below
Language usedHTML , CSS and JavaScript
External link / DependenciesNo
ResponsiveYes
Tab Bar Animation Table

ADVERTISEMENT

I hope you enjoy our blog so let’s start with a basic HTML structure for the Tab Bar Animation.

HTML Code For Tab Bar Animation

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Tab Bar v.2</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <menu class="menu">
        
        <button class="menu__item active">
            <div class="menu__icon" >

                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.1 145" >
            
                    <g id="home-anm">
                        <path stroke-linejoin="round"  stroke-linecap="round" d="M70.5,80.1h40.7"/>
                        <path d="M35,64v80"/>
                        <path d="M145.1,143V63"/>
                        <path stroke-linecap="round" stroke-linejoin="round" d="M24.9,70l65.7-50.7L156.3,70"/>
                    </g>
        
                    <path stroke-linejoin="round" d="M145.1,117.6v33.1c0,1.5-1.2,2.8-2.8,2.8h-28.4c-1.5,0-2.8-1.2-2.8-2.8V126c0-11.3-9.2-20.5-20.5-20.5l0,0
                    c-11.3,0-20.5,9.2-20.5,20.5v27.5h16H37.8c-1.5,0-2.8-1.2-2.8-2.8v-34.2"/>
        
                </svg>

            </div>
            <strong class="menu__text active">home</strong>
        </button>

        <button class="menu__item">
            <div class="menu__icon" >

                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.1 145">

                    <g id="strategy-anm" >
                        <path d="M84.1,50.4L72,64.7c-2,2.4-5.2,3.5-8.3,3l-40.1-6.8c-3.2-0.6-5.8,2.4-4.8,5.5L42,127.9c1.2,3.6,4.6,6.1,8.4,6.1
                        h81.6c3.9,0,7.3-2.6,8.5-6.3l21.5-61.4c0.9-3-1.7-6-4.9-5.4l-38.3,6.7c-3,0.6-6.2-0.5-8.2-2.8L97.4,50.2
                        C93.8,46.3,87.6,46.3,84.1,50.4z"/>
                    </g>
                    <path stroke-linecap="round" d="M38.8,153.5h105.5"/>
                    <path stroke-linecap="round" d="M66.8,112.5h49.5"/>
                    <path id="strategy-cir1" stroke-width="0" fill="currentColor" d="M32.4,37.5c0,5.8-4.7,10.5-10.5,10.5s-10.5-4.7-10.5-10.5S16.1,27,21.9,27S32.4,31.7,32.4,37.5z"/>
                    <path id="strategy-cir2" stroke-width="0" fill="currentColor" d="M102.3,23.5c0,5.8-4.7,10.5-10.5,10.5s-10.5-4.7-10.5-10.5S86,13,91.8,13S102.3,17.7,102.3,23.5z"/>
                    <path id="strategy-cir3" stroke-width="0" fill="currentColor" d="M169.6,37.5c0,5.8-4.7,10.5-10.5,10.5s-10.5-4.7-10.5-10.5S153.3,27,159.1,27S169.6,31.7,169.6,37.5z"/>
                
                </svg>

            </div>
            <strong class="menu__text">strategy</strong>
        </button>

        <button class="menu__item">
            <div class="menu__icon" >

                <svg class="icon"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.1 145" >

                    <g id="period-cir">
                        <path fill="currentColor" stroke-width="0" d="M96.5,141.7c0,3.9-3.1,7-7,7s-7-3.1-7-7s3.1-7,7-7C93.4,134.6,96.5,137.8,96.5,141.7z"/>
                        <path fill="currentColor" stroke-width="0" d="M78.2,126.7c0,3.9-3.1,7-7,7s-7-3.1-7-7c0-3.9,3.1-7,7-7S78.2,122.8,78.2,126.7z"/>
                        <path fill="currentColor" stroke-width="0" d="M110.6,120.5c0,3.9-3.1,7-7,7s-7-3.1-7-7s3.1-7,7-7S110.6,116.6,110.6,120.5z"/>
                    
                    </g>
                    <g id="period-anm">
                        <path stroke-linecap="round" d="M30.8,24.7h118.3 M117.3,71.2l9.7-6.7c0.7-0.4,1.1-1.1,1.1-1.9V24.7H50v37.8"/>
                        <path stroke-linecap="round" d="M149.4,153.3H30.6 M75.5,90.7l-23.1,21.2c-1.6,1.4-2.4,3.4-2.4,5.6v35.9h78.1V113"/>
                        <g id="period-line">
                            <path stroke-linecap="round" d="M50,62.5l40,44.2"/>
                            <path stroke-linecap="round" d="M128.1,111.7L95.2,73.4"/>
                        </g>
                    </g>
        
                </svg>

            </div>
            <strong class="menu__text">period</strong>
        </button>

        <button class="menu__item">
            <div class="menu__icon" >

                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.1 145" >

                    <path stroke-linecap="round" d="M94,139c-4.8,1.3-8.8,1.7-11.4,1.8c0,0-18.3,1.1-36.9-11.6c-1.9-1.3-4.7-3.2-7.8-6.2c-1.7-1.6-2.9-2.9-3.4-3.6
                    c0,0-3.6-4.2-6.1-8.6c-4.6-8.4-5.4-18.9-5.5-21l0,0V75.5v-39c0-0.7,0.5-1.3,1.2-1.5l58-14.2c0.2-0.1,0.5-0.1,0.7,0l57.9,14.7
                    c0.7,0.2,1.1,0.8,1.1,1.5v29.7"/>
                    <path id="security-cir" stroke-linecap="round" d="M158.3,120.7c0,18.3-14.8,33.1-33.1,33.1s-33-14.8-33-33.1s14.8-33.1,33.1-33.1S158.3,102.4,158.3,120.7z"/>
                    <g id="security-strok">
                        <path stroke-linecap="round" d="M151.1,104.5l-25,25c-1.3,1.3-3.5,1.3-4.9,0l-9.1-9.1"/>
                        <path stroke-linecap="round" d="M82.6,43L23.1,62.3"/>
                        <path stroke-linecap="round" d="M82.6,68.4L23.1,87.6"/>
                    </g>
        
                </svg>

            </div>
            <strong class="menu__text">security</strong>
        </button>

        <button class="menu__item">
            <div class="menu__icon" >

                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.1 145" >

                    <circle cx="90.5" cy="90.2" r="19.7"/>
                    <g id="settings-anm" >
                        <path stroke-linejoin="round" d="M144.7,73.8l-6.2-1c-0.6-1.5-1.2-3-1.9-4.5l3.6-5.1c3.2-4.4,2.7-10.5-1.2-14.3l-7.4-7.4
                        c-2.1-2.1-4.9-3.3-7.8-3.3c-2.3,0-4.5,0.7-6.4,2.1l-5.1,3.6c-1.6-0.7-3.2-1.4-4.8-2l-1-6.1c-0.9-5.4-5.5-9.3-10.9-9.3H85.1
                        c-5.4,0-10,3.9-10.9,9.2L73.1,42c-1.5,0.6-3,1.2-4.5,1.9l-5-3.6c-1.9-1.4-4.1-2.1-6.5-2.1c-3,0-5.8,1.2-7.8,3.3l-7.4,7.4
                        c-3.8,3.8-4.3,9.8-1.2,14.3l3.7,5.2c-0.7,1.5-1.3,3-1.8,4.5l-6.1,1c-5.4,0.9-9.3,5.5-9.3,10.9v10.5c0,5.4,3.9,10,9.2,10.9l6.3,1.1
                        c0.6,1.5,1.2,3,1.9,4.5l-3.6,5c-3.2,4.4-2.7,10.5,1.2,14.3l7.4,7.4c2.1,2.1,4.9,3.3,7.8,3.3c2.3,0,4.5-0.7,6.4-2.1L69,136
                        c1.4,0.6,2.8,1.2,4.2,1.7l1,6.2c0.9,5.4,5.5,9.3,10.9,9.3h10.5c5.4,0,10-3.9,10.9-9.2l1-6.2c1.5-0.6,3-1.2,4.5-1.9l5.1,3.6
                        c1.9,1.4,4.1,2.1,6.5,2.1c3,0,5.7-1.2,7.8-3.3l7.4-7.4c3.8-3.8,4.3-9.8,1.2-14.3l-3.6-5.1c0.7-1.5,1.3-3,1.9-4.5l6.2-1
                        c5.4-0.9,9.3-5.5,9.3-10.9V84.8C153.9,79.3,150.1,74.7,144.7,73.8z"/>
                    </g>
        
                </svg>

            </div>
            <strong class="menu__text">settings</strong>
        </button>

    </menu>
    <script src="app.js"></script>
</body>
</html>
 

There is all the HTML Code for the Tab Bar Animation. Now, you can see an Output Without Css and JavaScript. then we write Css JavaScript for the Tab Bar Animation.

ADVERTISEMENT

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

ADVERTISEMENT

Only Html Code Output

Tab Bar Animation Using HTML,CSS and JavaScript
Tab Bar Animation Using HTML,CSS and JavaScript

 

CSS Code For Tab Bar Animation

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@800&display=swap");

html {
  box-sizing: border-box;
  --duration: 0.45s;
  --cubic: cubic-bezier(0.4, 0, 0.2, 1);
  --color-1: #d5dadd;
  --color-2: #51d5c2;
}

html *,
html *::before,
html *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  height: 100vh;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  background-color: #f0f1f1;
  font-family: "Nunito", sans-serif;
}

.menu {
  margin: 0;
  width: 42em;
  display: flex;
  height: 10.4em;
  user-select: none;
  position: relative;
  align-items: center;
  padding: 0 1.9em 2.5em;
  justify-content: center;
  background-color: #fefefe;
  border-radius: 1em 1em 4.5em 4.5em;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 42.625em) {
  .menu {
    font-size: 0.55em;
  }
}

.menu::after {
  height: 5%;
  width: 35%;
  bottom: 10%;
  content: " ";
  position: absolute;
  border-radius: 1em;
  background-color: #f2f3f4;
}

.menu__item {
  all: unset;
  flex-grow: 1;
  display: flex;
  cursor: pointer;
  overflow: hidden;
  padding-top: 0.5em;
  position: relative;
  align-items: center;
  color: var(--color-1);
  justify-content: center;
  transition: flex-grow var(--duration) var(--cubic);
}

.menu__icon {
  font-size: 1.05em;
  stroke: currentColor;
  transition: transform var(--duration) var(--cubic);
}

.menu__item::before {
  top: 9%;
  left: 18.4%;
  width: 1.5em;
  height: 1.5em;
  content: " ";
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  transform-origin: center;
  background-color: #fdecef;
  transition: transform var(--duration) var(--cubic);
}

.menu__item::after {
  left: 0;
  bottom: 0;
  content: " ";
  height: 0.25em;
  position: absolute;
  border-radius: 2em;
  transform-origin: left center;
  background-color: currentColor;
  width: calc(var(--lineWidth) + 5px);
  transform: translate3d(3em, 0, 0) scaleX(0);
  transition: transform calc(var(--duration) + 0.2s) var(--cubic);
}

.menu__text {
  left: 4.15em;
  font-size: 1.5em;
  position: absolute;
  text-transform: capitalize;
  letter-spacing: 0.01em;
  transform: translate3d(0, 109%, 0);
  transition: transform calc(var(--duration) / 3.7);
}

.menu__item.active {
  flex-grow: 2.7;
  color: var(--color-2);
}

.menu__item.active .menu__icon {
  transform: translate3d(-95%, 0, 0);
}

.menu__item.active::before {
  transform: scale(1);
}

.menu__item.active::after {
  transform: translate3d(6.3em, 0, 0) scaleX(1);
  transition: transform var(--duration) var(--cubic);
}

.menu__text.active {
  transform: translate3d(0, 0, 0);
  transition: transform calc(var(--duration) / 1.5);
}

.icon {
  --duration-icon: 1s;

  fill: none;
  width: 2.5em;
  height: 2.5em;
  display: block;
  stroke-width: 15;
  stroke-miterlimit: 10;
}

.active #home-anm {
  animation: home var(--duration-icon);
}

@keyframes home {
  25% {
    transform: translate3d(0, -0.8em, 0);
  }

  50% {
    transform: translate3d(0, 0.5em, 0);
  }
}

#strategy-anm {
  transform: scaleX(0.85);
  transform-origin: center;
}

.active #strategy-anm {
  animation: strategy var(--duration-icon);
}

@keyframes strategy {
  50% {
    transform: scaleX(1);
  }

  100% {
    transform: scaleX(0.85);
  }
}

.active #strategy-cir1 {
  animation: strategy-cir1 var(--duration-icon);
}

.active #strategy-cir2 {
  animation: strategy-cir2 var(--duration-icon) 0.1s;
}

.active #strategy-cir3 {
  animation: strategy-cir3 var(--duration-icon) 0.2s;
}

@keyframes strategy-cir1 {
  50% {
    transform: translate3d(-0.7em, -0.7em, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes strategy-cir2 {
  35% {
    transform: translate3d(0, -0.7em, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes strategy-cir3 {
  35% {
    transform: translate3d(0.7em, -0.7em, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

.active #period-anm {
  transform-origin: center 100%;
  animation: period var(--duration-icon);
}

.active #period-cir {
  transform-origin: center;
  animation: period-cir var(--duration-icon);
}

.active #period-line {
  stroke-dasharray: 66;
  animation: period-line calc(var(--duration-icon) / 2.5) reverse;
}

@keyframes period {
  35% {
    transform: scaleY(0.85);
  }

  60%,
  70% {
    transform: scaleY(1.2);
  }

  100% {
    transform: scaleY(1);
  }
}

@keyframes period-cir {
  0% {
    opacity: 0;
  }

  35% {
    opacity: 1;
    transform: translate3d(15%, -55%, 0);
  }

  60% {
    opacity: 0;
    transform: translate3d(-8%, -50%, 0);
  }
}

@keyframes period-line {
  100% {
    stroke-dashoffset: 66;
  }
}

.active #security-cir {
  transform-box: fill-box;
  transform-origin: center;
  animation: security-cir calc(var(--duration-icon) / 1.5);
}

@keyframes security-cir {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

.active #security-strok {
  stroke-dasharray: 96;
  animation: security-strok calc(var(--duration-icon) / 1.2);
}

@keyframes security-strok {
  0% {
    stroke-dashoffset: 60;
  }

  100% {
    stroke-dashoffset: 230;
  }
}

.active #settings-anm {
  transform-box: fill-box;
  transform-origin: center;
  animation: settings-anm calc(var(--duration-icon) / 1.5);
}

@keyframes settings-anm {
  0% {
    transform: rotate(-60deg);
  }

  50% {
    transform: rotate(60deg);
  }
}

There is all the CSS Code for the Tab Bar Animation. Now, you can see an Output Without JavaScript. then we write JavaScript Code For Main Functiloty for the Tab Bar Animation.

50+ Html ,Css & Javascript Projects With Source Code

ADVERTISEMENT

Html + Css Updated Code Output

Tab Bar Animation Using HTML,CSS and JavaScript
Tab Bar Animation Using HTML,CSS and JavaScript

 

JavaScript Code For Tab Bar Animation

// Designed by: Hoang Nguyen
// Original image: https://dribbble.com/shots/5919154-Tab-Bar-Label-Micro-Interaction

const buttons = document.querySelectorAll(".menu__item");
let activeButton = document.querySelector(".menu__item.active");

buttons.forEach(item => {

    const text = item.querySelector(".menu__text");
    setLineWidth(text, item);

    window.addEventListener("resize", () => {
        setLineWidth(text, item);
    })

    item.addEventListener("click", function () {
        if (this.classList.contains("active")) return;

        this.classList.add("active");

        if (activeButton) {
            activeButton.classList.remove("active");
            activeButton.querySelector(".menu__text").classList.remove("active");
        }

        handleTransition(this, text);
        activeButton = this;

    });


});


function setLineWidth(text, item) {
    const lineWidth = text.offsetWidth + "px";
    item.style.setProperty("--lineWidth", lineWidth);
}

function handleTransition(item, text) {

    item.addEventListener("transitionend", (e) => {

        if (e.propertyName != "flex-grow" ||
            !item.classList.contains("active")) return;

        text.classList.add("active");

    });

}

Final output

Tab Bar Animation Using HTML,CSS and JavaScript
Tab Bar Animation Using HTML,CSS and JavaScript

Ecommerce Website Using Html Css And Javascript Source Code

Tab Bar Animation Using HTML,CSS and JavaScript
Tab Bar Animation Using HTML,CSS and JavaScript

 

Live Preview Of Tab Bar Animation Using HTML,CSS and JavaScript

ADVERTISEMENT

Now that we have completed our Tab Bar Animation.Our updated output with Html,Css and JavaScript. I hope you like the Tab Bar Animation. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

ADVERTISEMENT

Thank you!

This post teaches us how to create a Tab Bar Animation Using HTML ,CSS and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

Code By – abxlfazl khxrshidi

Which code editor do you use for this Tab Bar Animation coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

ADVERTISEMENT

is this project responsive or not?

Yes! this is a responsive project

ADVERTISEMENT

Do you use any external links to create this project?

No!

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT