<!--
Based on https://dribbble.com/shots/5326247-Tab-Bar-Interaction-VI
-->
<svg display="none">
<symbol id="icon-home" viewBox="0 0 64 64">
<polygon points="6.1,58 6,18 32,6 58,18 58,58 "/>
</symbol>
<symbol id="icon-favourites" viewBox="0 0 64 64">
<path d="M32 12.5c-6-6-15.7-6-21.7 0s-6 15.7 0 21.7L32 56l21.7-21.7c6-6 6-15.7 0-21.7C47.7 6.5 38 6.5 32 12.5z"/>
</symbol>
<symbol id="icon-settings" viewBox="0 0 64 64">
<circle class="st0" cx="17" cy="20" r="9"/>
<line class="st0" x1="26" y1="20" x2="56" y2="20"/>
<circle class="st0" cx="47" cy="44" r="9"/>
<line class="st0" x1="38" y1="44" x2="8" y2="44"/>
</symbol>
</svg>
<div id="tab-bar">
<div class="tab active">
<div>
<svg viewBox="0 0 64 64">
<use xlink:href="#icon-home"></use>
</svg>
</div>
<div>
<svg viewBox="0 0 64 64">
<use xlink:href="#icon-home"></use>
</svg>
</div>
</div>
<div class="tab">
<div>
<svg viewBox="0 0 64 64">
<use xlink:href="#icon-favourites"></use>
</svg>
</div>
<div>
<svg viewBox="0 0 64 64">
<use xlink:href="#icon-favourites"></use>
</svg>
</div>
</div>
<div class="tab">
<div>
<svg viewBox="0 0 64 64">
<use xlink:href="#icon-settings"></use>
</svg>
</div>
<div>
<svg viewBox="0 0 64 64">
<use xlink:href="#icon-settings"></use>
</svg>
</div>
</div>
</div>
$black:#333333;
$white:#FFFFFF;
svg>symbol * {
fill:none;
stroke:inherit;
stroke-width:10;
stroke-miterlimit:10;
}
body {
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background-color:#F5F5F5;
#tab-bar {
display:flex;
transform:scale(1);
width:440px;
height:120px;
transition:transform .25s cubic-bezier(0.05, 0.61, 0.41, 0.95);
.tab {
flex-grow:1;
position: relative;
overflow:hidden;
cursor: pointer;
&.active {
div:first-child {
background-color:$white;
stroke:$black;
fill:$black;
}
div:last-child {
background-color:$black;
stroke:$white;
fill:$white;
}
}
&:not(.active) {
div:first-child {
background-color:$black;
stroke:$white;
fill:$white;
}
div:last-child {
background-color:$white;
stroke:$black;
fill:$black;
}
}
>div {
display:flex;
justify-content:center;
align-items:center;
position: relative;
top:-120px;
height:100%;
svg {
width:32px;
height:32px;
}
}
}
&:active {
transform:scale(0.95);
}
}
}
View Compiled
var phase = 0;
$("#tab-bar .tab").mousedown(function(){
if(!$(this).is(".active") && phase == 0) {
phase = 1;
$(".tab.active div").animate({top:0}, 250, function(){
$(".tab div").removeAttr("style");
$(".tab.active").removeClass("active");
});
}
}).mouseup(function(){
$this = $(this);
if(!$(this).is(".active") && phase == 1) {
phase = 2;
$(this).find("div").animate({top:0}, 250, function(){
$this.find("div").removeAttr("style");
$this.addClass("active");
phase=0;
});
}
});