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

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://codepen.io/z-/pen/a8e37caf2a04602ea5815e5acedab458.js