Free Coding Ebook 👉 Get Now
Animated Tab Bar Using HTML,CSS, and JavaScript
Hello Coder! Welcome to the Codewithrandom blog. In this article, we learn how to Create an Animated Tab Bar Using HTML, CSS, and JavaScript. this is an animated tab bar means when you click on active tabs it contains animation when you switch or click.
| Code by | abxlfazl khxrshidi |
| Project Download | Link Available Below |
| Language used | HTML , CSS and JavaScript |
| External link / Dependencies | No |
| Responsive | Yes |
50+ HTML, CSS and JavaScript Projects With Source Code
ADVERTISEMENT
The tab bar is a horizontal bar used to access various website areas.
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
<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>
Using the menu tag, we’ll create a menu bar to add the structure for our tab bar. Within this menu bar, we’ll add the svg image for our tab bar animation, the button tag will be used to create the button for our tab menu, and the div tag will be used to create the menu for various sections, all of which will contain the svg icons.
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.
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
Only Html Code Output
CSS Code For Tab Bar
@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);
}
}
Step1:We will import the Nunito typeface using the Google import. We’ll specify the box size to “border box” using the HTML tag selector.
Ecommerce Website Using HTML, CSS, and JavaScript (Source Code)
The margin will be set to “zero” using the body tag selector, and the height will be set to “100vh” using the height property. The display will be set to “flex” using the display property, and the background will be set to grey using the background property. The typeface will be set to “nunito” using the font property.
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@800&display=swap');
html {
box-sizing: border-box ;
--duration: .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 ;
}
Step2:The margin will be set to zero using the class identifier “.menu,” the width will be set to “42 px,” the item will be centred using the align property, and responsiveness will be added to our project using the media query property.
.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: .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) ;
}
Step3:Using the class selector, we will now style the menu images. (icon). We’ll use the display attribute to set the display as block and set the width and height to “2.5” and “2.5,” respectively. The keyframes will now be added to our tab menu effects using the keyframes attribute.
.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, -.8em , 0) ;
}
50% {
transform: translate3d(0, .5em , 0) ;
}
}
#strategy-anm {
transform: scaleX(.85) ;
transform-origin: center ;
}
.active #strategy-anm {
animation: strategy var(--duration-icon) ;
}
@keyframes strategy {
50% {
transform: scaleX(1) ;
}
100%{
transform: scaleX(.85) ;
}
}
.active #strategy-cir1 {
animation: strategy-cir1 var(--duration-icon);
}
.active #strategy-cir2 {
animation: strategy-cir2 var(--duration-icon) .1s;
}
.active #strategy-cir3 {
animation: strategy-cir3 var(--duration-icon) .2s;
}
@keyframes strategy-cir1 {
50% {
transform: translate3d(-.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(.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(.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.
Create Resume/CV Website Using HTML and CSS (Source Code)
Html + Css Updated Code Output
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
JavaScript Code For Tab Bar
ADVERTISEMENT
// 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");
});
}
We will first pick all of the HTML from the document within our javascript. When we as the user click the button, the list of that icon will be added and the prior class will be removed. Along with that, we will also add animation to our tab menu using the queryselectorAll method and the for each function for the button.
ADVERTISEMENT
Final Output Of Animated Tab Bar Using HTML,CSS, and JavaScript
Ecommerce Website Using Html Css And Javascript Source Code
Video Output Animated Tab Bar:
Live Preview Of Tab Bar Animation:
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.
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.
What is Tab Bar Menu?
This is the structure used most frequently for mobile application navigation. There are typically 4-5 fragments inside. We can navigate from one area to another with the aid of the tab bar.
What are benefits for Tab Bar Menu?
The main benefits are:
1. Easy to navigate
2. Time Saving
3. User Friendly.
