Fancy tab bar animation | Tab bar UI design html css javascript

Fancy tab bar animation | Tab bar UI design html css javascript 

Welcome🎉 to Code With Random blog. In this blog, we learn that how we create a Fancy tab bar. We use HTML, Css, and javascript for this Fancy tab bar. Hope you enjoy our blog so let’s start with a basic HTML structure for a Fancy tab bar.

HTML code

 <!DOCTYPE html>
<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>Fancy tab bar animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="frame">
<ul class="tabbar">
<li class="active">
<a href="" class="box">
<div>
<svg>
<use xlink:href="#box">
</svg>
<em></em>
</div>
</a>
</li>
<li>
<a href="" class="home">
<div>
<svg>
<use xlink:href="#home">
</svg>
</div>
</a>
</li>
<li>
<a href="" class="calendar">
<div>
<svg>
<use xlink:href="#calendar">
</svg>
<em></em>
</div>
</a>
</li>
</ul>
</div>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="box">
<path d="M4.2715356,6.86557078 C3.79533783,7.1301251 3.5,7.63205601 3.5,8.1768067 L3.5,15.8231933 C3.5,16.367944 3.79533783,16.8698749 4.2715356,17.1344292 L11.2715356,21.0233181 C11.7245694,21.2750036 12.2754306,21.2750036 12.7284644,21.0233181 L19.7284644,17.1344292 C20.2046622,16.8698749 20.5,16.367944 20.5,15.8231933 L20.5,8.1768067 C20.5,7.63205601 20.2046622,7.1301251 19.7284644,6.86557078 L12.7284644,2.97668189 C12.2754306,2.72499645 11.7245694,2.72499645 11.2715356,2.97668189 L4.2715356,6.86557078 Z"></path>
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="home">
<path d="M3.66781808,10.0753614 C3.5610739,10.1702451 3.5,10.3062472 3.5,10.4490661 L3.5,20 C3.5,20.8284271 4.17157288,21.5 5,21.5 L19,21.5 C19.8284271,21.5 20.5,20.8284271 20.5,20 L20.5,10.4490661 C20.5,10.3062472 20.4389261,10.1702451 20.3321819,10.0753614 L12.9965458,3.55479593 C12.4282167,3.04961457 11.5717833,3.04961457 11.0034542,3.55479593 L3.66781808,10.0753614 Z"></path>
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="calendar">
<path d="M5,4.5 C4.17157288,4.5 3.5,5.17157288 3.5,6 L3.5,19 C3.5,19.8284271 4.17157288,20.5 5,20.5 L19,20.5 C19.8284271,20.5 20.5,19.8284271 20.5,19 L20.5,6 C20.5,5.17157288 19.8284271,4.5 19,4.5 L5,4.5 Z"></path>
</symbol>
</svg>

<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/7030278-Tab-bar-animation" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>


There is all HTML code for the Fancy tab bar. Now, you can see output without CSS, then we write css & javascript for the Fancy tab bar.

output

Fancy tab bar animation | Tab bar UI design html css javascript

CSS Code


 .tabbar {  
--primary: #275efe;
--background: #fff;
--icon-active: #fff;
--x: 64px;
width: 100%;
margin: 0;
padding: 0 16px;
border-radius: 0 0 28px 28px;
list-style: none;
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
background: var(--background);
}
.tabbar:before, .tabbar:after {
content: '';
position: absolute;
left: 0;
border-radius: 50%;
transform: translateX(var(--x));
}
.tabbar:before {
width: 64px;
height: 64px;
margin-left: -32px;
background: var(--primary);
top: -16px;
z-index: 1;
}
.tabbar:after {
width: 84px;
height: 84px;
margin-left: -42px;
background: rgba(255, 255, 255, .08);
top: -26px;
}
.tabbar li a {
display: block;
padding: 24px 0;
backface-visibility: hidden;
transition: transform 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.tabbar li a div {
--y: 0;
width: 32px;
height: 32px;
margin: 0 auto;
position: relative;
z-index: 1;
backface-visibility: hidden;
transform: translateY(var(--y));
}
.tabbar li a div svg {
display: block;
width: 32px;
height: 32px;
fill: rgba(255, 255, 255, 0);
stroke-width: 1px;
stroke: var(--primary);
}
.tabbar li a div:before {
--s-x: 1;
--s-y: 1;
content: '';
display: block;
position: absolute;
z-index: 1;
transform: scaleX(var(--s-x)) scaleY(var(--s-y));
}
.tabbar li a.box div:before {
--s-x: 0.75;
left: 50%;
margin-left: -1px;
width: 2px;
height: 12px;
bottom: 4px;
border-radius: 1px;
background: var(--primary);
}
.tabbar li a.box div em {
--s-x: 1;
--s-y: 1;
display: block;
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
}
.tabbar li a.box div em:before, .tabbar li a.box div em:after {
--r: 0deg;
content: '';
display: block;
height: 2px;
border-radius: 1px;
width: 13px;
background: var(--primary);
position: absolute;
bottom: -1px;
transform: rotateZ(var(--r)) translateY(1px) scaleY(0.75);
}
.tabbar li a.box div em:before {
--r: 30deg;
right: -1px;
transform-origin: 100% 50%;
}
.tabbar li a.box div em:after {
--r: -30deg;
left: -1px;
transform-origin: 0% 50%;
}
.tabbar li a.home div:before {
--s-x: 0.75;
--s-y: 0.75;
border: 2px solid var(--primary);
border-bottom: 0;
width: 12px;
height: 17px;
border-radius: 2px 2px 0 0;
left: 50%;
bottom: 1px;
margin-left: -6px;
transform: scale(0.75);
}
.tabbar li a.calendar div:before {
--s-y: 0.75;
height: 2px;
width: 22px;
background: var(--primary);
left: 50%;
top: 12px;
margin-left: -11px;
}
.tabbar li a.calendar div em {
display: block;
position: absolute;
top: 3px;
left: 50%;
}
.tabbar li a.calendar div em:before, .tabbar li a.calendar div em:after {
content: '';
display: block;
width: 2px;
border-radius: 1px;
height: 7px;
background: var(--primary);
position: absolute;
top: 0;
backface-visibility: hidden;
transform: scaleX(0.75);
transition: background 0.4s ease;
}
.tabbar li a.calendar div em:before {
right: -6px;
}
.tabbar li a.calendar div em:after {
left: -6px;
}
.tabbar li.active a div {
--y: -24px;
}
.tabbar li.active a div svg {
fill: var(--icon-active);
}
.tabbar li.active a.calendar em:before, .tabbar li.active a.calendar em:after {
background: var(--icon-active);
}
.tabbar li:not(.active) a div {
transition: transform 0.4s ease;
}
.tabbar li:not(.active) a div svg {
transition: fill 0.4s ease;
}
.tabbar li:not(.active) a:active {
transform: scale(0.92);
}
.tabbar li.move a div {
animation: icon 1.2s linear forwards;
}
.tabbar li.move a div svg {
animation: svg 1.2s linear forwards;
}
.tabbar li.move a.box div:before {
animation: element-far 1.2s linear forwards;
}
.tabbar li.move a.box div em {
animation: element-close 1.2s linear forwards;
}
.tabbar li.move a.home div:before {
animation: element-close 1.2s linear forwards;
}
.tabbar li.move a.calendar div:before {
animation: element-close 1.2s linear forwards;
}
.tabbar li.move a.calendar div em {
animation: calendar-2 1.2s linear forwards;
}
.tabbar li.move a.calendar div em:before, .tabbar li.move a.calendar div em:after {
animation: calendar-3 1.2s linear forwards;
}
.tabbar.move:before {
animation: move 1.2s linear forwards;
}
.tabbar.move:after {
animation: move-after 1.2s linear forwards;
}
.frame {
width: 320px;
height: 240px;
border-radius: 0 0 28px 28px;
overflow: hidden;
display: flex;
align-items: flex-end;
}
@keyframes move {
10%, 15% {
transform: translate(var(--x), 84px);
}
30% {
transform: translate(var(--x-n), 84px);
}
42%, 70% {
transform: translate(var(--x-n), -16px);
}
85% {
transform: translate(var(--x-n), 4px);
}
100% {
transform: translate(var(--x-n), 0);
}
}
@keyframes move-after {
10%, 15% {
transform: translate(var(--x), 84px) scale(0.82);
}
30% {
transform: translate(var(--x-n), 84px) scale(0.82);
}
42% {
transform: translate(var(--x-n), -16px) scale(0.82);
}
60% {
transform: translate(var(--x-n), -16px) scale(1);
}
70% {
transform: translate(var(--x-n), -16px) scale(1);
}
85% {
transform: translate(var(--x-n), 4px) scale(1);
}
100% {
transform: translate(var(--x-n), 0) scale(1);
}
}
@keyframes icon {
30% {
transform: translateY(0px);
}
40%, 70% {
transform: translateY(-100px);
}
85% {
transform: translateY(-20px);
}
100% {
transform: translateY(-24px);
}
}
@keyframes svg {
30% {
fill: rgba(255, 255, 255, 0);
transform: translateY(0);
}
40% {
fill: rgba(255, 255, 255, 0);
transform: translateY(-36px);
}
70% {
fill: rgba(255, 255, 255, 0);
transform: translateY(-56px);
}
80% {
fill: rgba(255, 255, 255, 0);
}
85% {
fill: var(--icon-active);
transform: translateY(0);
}
100% {
fill: var(--icon-active);
transform: translateY(0);
}
}
@keyframes element-close {
30% {
transform: translateY(0) scaleX(var(--s-x)) scaleY(var(--s-y));
}
40% {
transform: translateY(-16px) scaleX(var(--s-x)) scaleY(var(--s-y));
}
70% {
transform: translateY(-28px) scaleX(var(--s-x)) scaleY(var(--s-y));
}
85% {
transform: translateY(0) scaleX(var(--s-x)) scaleY(var(--s-y));
}
100% {
transform: translateY(0) scaleX(var(--s-x)) scaleY(var(--s-y));
}
}
@keyframes element-far {
30% {
transform: translateY(0) scaleX(var(--s-x)) scaleY(var(--s-y));
}
40% {
transform: translateY(-4px) scaleX(var(--s-x)) scaleY(var(--s-y));
}
70% {
transform: translateY(-12px) scaleX(var(--s-x)) scaleY(var(--s-y));
}
85% {
transform: translateY(0) scaleX(var(--s-x)) scaleY(var(--s-y));
}
100% {
transform: translateY(0) scaleX(var(--s-x)) scaleY(var(--s-y));
}
}
@keyframes calendar-2 {
30% {
transform: translateY(0);
}
40% {
transform: translateY(0px);
}
70% {
transform: translateY(-8px);
}
85% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
@keyframes calendar-3 {
75% {
background: var(--primary);
}
80%, 100% {
background: var(--icon-active);
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
}
*:before, *:after {
box-sizing: inherit;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #242836;
}
body .dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
}
body .dribbble img {
display: block;
height: 28px;
}

Here is our updated output CSS.

output

Fancy tab bar animation | Tab bar UI design html css javascript

Javascript code 

 $('.tabbar li a').on('click', function(e) {  
e.preventDefault();
let that = $(this),
li = that.parent(),
ul = li.parent();
if(!ul.hasClass('move') && !li.hasClass('active')) {
ul.children('li').removeClass('active');
ul.css('--x-n', li.position().left + li.outerWidth() / 2 + 'px');
li.addClass('move');
ul.addClass('move');
setTimeout(() => {
ul.removeClass('move');
li.removeClass('move').addClass('active');
ul.css('--x', li.position().left + li.outerWidth() / 2 + 'px');
}, 1200);
}
});

Final output


Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the Fancy tab bar. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a Fancy tab bar using simple 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 

Share on:

Leave a Comment