<nav class="tabbar">
<ul>
<li>
<a href="">
<svg>
<use xlink:href="#homeIcon">
</svg>
<span>Home</span>
</a>
</li>
<li class="active">
<a href="">
<svg>
<use xlink:href="#favoritesIcon">
</svg>
<span>Favorites</span>
</a>
</li>
<li>
<a href="">
<svg>
<use xlink:href="#settingsIcon">
</svg>
<span>Settings</span>
</a>
</li>
</ul>
</nav>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="homeIcon" fill="currentColor">
<path d="M13.1428571,14.5 C13.6571429,14.5 14,14.175507 14,13.6887676 L14,6.38767551 C14,6.14430577 13.9142857,5.90093604 13.6571429,5.73868955 L8.51428571,1.6825273 C8.17142857,1.43915757 7.74285714,1.43915757 7.4,1.6825273 L2.25714286,5.73868955 C2.08571429,5.90093604 2,6.14430577 2,6.38767551 L2,13.6887676 C2,14.175507 2.34285714,14.5 2.85714286,14.5 L13.1428571,14.5 Z M5.42857143,12.8775351 L3.71428571,12.8775351 L3.71428571,6.79329173 L8,3.38611544 L12.2857143,6.79329173 L12.2857143,12.8775351 L10.5714286,12.8775351 L5.42857143,12.8775351 Z"></path>
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="favoritesIcon" fill="currentColor">
<path d="M7.5125,14.3196446 C6.8625,13.7292662 1.5,9.09057902 1.5,5.54830881 C1.5,3.27113511 3.2875,1.5 5.4,1.5 C6.375,1.5 7.26875,1.92169883 8,2.5120772 C8.73125,1.83735907 9.625,1.5 10.6,1.5 C12.79375,1.5 14.5,3.35547487 14.5,5.54830881 C14.5,9.09057902 9.1375,13.7292662 8.4875,14.2353048 C8.24375,14.5726639 7.75625,14.5726639 7.5125,14.3196446 Z M5.4,3.18679534 C4.18125,3.18679534 3.125,4.28321231 3.125,5.54830881 C3.125,7.40378368 5.96875,10.6086948 8,12.4641697 C9.70625,10.8617141 12.875,7.57246322 12.875,5.54830881 C12.875,4.19887254 11.81875,3.18679534 10.6,3.18679534 C9.86875,3.18679534 9.1375,3.60849417 8.73125,4.28321231 C8.40625,4.78925091 7.675,4.78925091 7.35,4.28321231 C6.8625,3.60849417 6.2125,3.18679534 5.4,3.18679534 Z"></path>
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="settingsIcon" fill="currentColor">
<path d="M8.16590157,11.9863016 C8.11194132,11.9953113 8.05651821,12 8,12 L3,12 C2.44771525,12 2,11.5522847 2,11 C2,10.4477153 2.44771525,10 3,10 L8,10 C8.05651821,10 8.11194132,10.0046887 8.16590157,10.0136984 C8.57384536,8.84135601 9.68866807,8 11,8 C12.6568542,8 14,9.34314575 14,11 C14,12.6568542 12.6568542,14 11,14 C9.68866807,14 8.57384536,13.158644 8.16590157,11.9863016 Z M11,12 C11.5522847,12 12,11.5522847 12,11 C12,10.4477153 11.5522847,10 11,10 C10.4477153,10 10,10.4477153 10,11 C10,11.5522847 10.4477153,12 11,12 Z"></path>
<path d="M7.83409843,4.01369835 C7.88805868,4.0046887 7.94348179,4 8,4 L13,4 C13.5522847,4 14,4.44771525 14,5 C14,5.55228475 13.5522847,6 13,6 L8,6 C7.94348179,6 7.88805868,5.9953113 7.83409843,5.98630165 C7.42615464,7.15864399 6.31133193,8 5,8 C3.34314575,8 2,6.65685425 2,5 C2,3.34314575 3.34314575,2 5,2 C6.31133193,2 7.42615464,2.84135601 7.83409843,4.01369835 Z M5,6 C5.55228475,6 6,5.55228475 6,5 C6,4.44771525 5.55228475,4 5,4 C4.44771525,4 4,4.44771525 4,5 C4,5.55228475 4.44771525,6 5,6 Z"></path>
</symbol>
</svg>
<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/6987202-Tab-bar-active-animation" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
.tabbar {
--background: #2F3545;
--shadow: rgba(18, 22, 33, .32);
--shadow-dark: rgba(18, 22, 33, .48);
--active: #fff;
--inactive: #6C7486;
--r: 0deg;
--x: 0px;
width: 280px;
border-radius: 6px;
perspective: 180px;
background: var(--background);
box-shadow: var(--x) 12px 20px var(--shadow-dark);
transition: transform .6s ease, box-shadow .6s ease;
transform: perspective(200px) rotateX(4deg) translateX(var(--x)) rotateY(var(--r)) translateZ(6px);
ul {
margin: 0;
padding: 0 4px;
list-style: none;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
li {
a {
display: block;
padding: 16px 0 12px 0;
text-decoration: none;
color: var(--inactive);
transition: color .4s ease;
position: relative;
svg,
span {
--z: 0px;
display: block;
transition: transform .4s ease, filter .4s ease;
transform-origin: 50% 50%;
transform: translate3d(0, 0, var(--z));
}
svg {
width: 24px;
height: 24px;
margin: 0 auto;
}
span {
text-align: center;
margin-top: 12px;
font-size: 11px;
line-height: 1;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .8px;
}
}
&.active {
a {
color: var(--active);
svg,
span {
transition-delay: .32s;
filter: drop-shadow(0 8px 2px var(--shadow));
}
svg {
--z: 16px;
}
span {
--z: 12px;
}
}
}
}
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: subpixel-antialiased;
}
* {
box-sizing: inherit;
&:before,
&:after {
box-sizing: inherit;
}
}
// Center & dribbble
body {
font-family: 'Mukta Malar', Arial;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #1E2432;
.dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
img {
display: block;
height: 28px;
}
}
}
View Compiled
$('.tabbar ul li a').on('click', function(e) {
e.preventDefault();
let that = $(this),
li = that.parent(),
ul = li.parent(),
div = ul.parent();
ul.children('li').removeClass('active');
li.addClass('active');
if(li.index() == 0) {
div.css({
'--r': '-4deg',
'--x': '16px'
});
} else if(li.index() == 2) {
div.css({
'--r': '4deg',
'--x': '-16px'
});
} else {
div.css({
'--r': '0deg',
'--x': '0px'
});
}
});