Tab Bar Interaction

<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>

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;
}
body #tab-bar {
  display: flex;
  transform: scale(1);
  width: 440px;
  height: 120px;
  transition: transform 0.25s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
body #tab-bar .tab {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
body #tab-bar .tab.active div:first-child {
  background-color: #FFFFFF;
  stroke: #333333;
  fill: #333333;
}
body #tab-bar .tab.active div:last-child {
  background-color: #333333;
  stroke: #FFFFFF;
  fill: #FFFFFF;
}
body #tab-bar .tab:not(.active) div:first-child {
  background-color: #333333;
  stroke: #FFFFFF;
  fill: #FFFFFF;
}
body #tab-bar .tab:not(.active) div:last-child {
  background-color: #FFFFFF;
  stroke: #333333;
  fill: #333333;
}
body #tab-bar .tab > div {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: -120px;
  height: 100%;
}
body #tab-bar .tab > div svg {
  width: 32px;
  height: 32px;
}
body #tab-bar:active {
  transform: scale(0.95);
}

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;
      });
   }
});