CodePen Embed - Tab Bar Interaction

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap" rel="stylesheet">

<script src="https://kit.fontawesome.com/56942480bb.js" crossorigin="anonymous"></script>

<div class="items">
  <div class="upper-bar"></div>
  
  <div class="item browse">
    <div class="item-img">
      <svg version="1.1" id="browse" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 81.7 81.2" style="enable-background:new 0 0 81.7 81.2;" xml:space="preserve">
        <style type="text/css">
          .itemStroke{fill:none;stroke:#B9C2CD;stroke-width:5;stroke-miterlimit:10;}
          .itemFill{fill:#B9C2CD;}
        </style>
        <circle class="itemStroke" cx="40.8" cy="40.8" r="20.4"/>
        <path class="itemFill" d="M23.4,35h37.8v5.8c0,0-17.7-1.9-17.8,20.2l-6.4-0.2c0,0,3.1-20-16.7-20.1V35H23.4z"/>
      </svg>
    </div>
    <p class="item-name">Browse</p>
  </div>
  
  <div class="item profile">
    <div class="item-img">
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 81.7 81.2" style="enable-background:new 0 0 81.7 81.2;" xml:space="preserve">
      <style type="text/css">
        .itemFill{fill:#B9C2CD;}
      </style>
      <path class="itemFill" d="M20,57.5v-1c0-7.1,5.7-12.8,12.8-12.8h7.7h8.1c7.2,0,13.1,5.9,13.1,13.1v0.7c0,1.4-1.1,2.5-2.5,2.5H22.5
        C21.1,59.9,20,58.8,20,57.5z"/>
      <circle class="itemFill" cx="40.8" cy="28.7" r="9.7"/>
      </svg>
    </div>
    <p class="item-name">Profile</p>
  </div>
  
  <div class="item chat">
    <div class="item-img">
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 81.7 81.2" style="enable-background:new 0 0 81.7 81.2;" xml:space="preserve">
      <style type="text/css">
        .itemFill{fill:#B9C2CD;}
      </style>
      <path class="itemFill" d="M55.7,19.3H26c-3.4,0-6.1,2.8-6.1,6.1V45c0,3.4,2.8,6.1,6.1,6.1h29.7c3.4,0,6.1-2.8,6.1-6.1V25.4
        C61.8,22,59.1,19.3,55.7,19.3z"/>
      <path class="itemFill" d="M32.9,57.6c0,1.3,1.2,2.3,2.5,2c1-0.2,2-0.6,2.9-1.6c2-2.3,7.3-7.8,7.3-7.8H32.9V57.6z"/>
      </svg>
    </div>
    <p class="item-name">Chat</p>
  </div>
  
  <div class="item menu">
    <div class="item-img">
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 81.7 81.2" style="enable-background:new 0 0 81.7 81.2;" xml:space="preserve">
      <style type="text/css">
        .itemFill{fill:#B9C2CD;}
      </style>
      <path class="itemFill" d="M49.5,55.9h-27c-1,0-1.7-0.8-1.7-1.7v-1.5c0-1,0.8-1.7,1.7-1.7h27c1,0,1.7,0.8,1.7,1.7v1.5
        C51.2,55.1,50.4,55.9,49.5,55.9z"/>
      <path class="itemFill" d="M59.2,30.2h-27c-1,0-1.7-0.8-1.7-1.7v-1.5c0-1,0.8-1.7,1.7-1.7h27c1,0,1.7,0.8,1.7,1.7v1.5
        C61,29.5,60.2,30.2,59.2,30.2z"/>
      <path class="itemFill" d="M59.2,43.1H22.5c-1,0-1.7-0.8-1.7-1.7v-1.5c0-1,0.8-1.7,1.7-1.7h36.8c1,0,1.7,0.8,1.7,1.7v1.5
        C61,42.3,60.2,43.1,59.2,43.1z"/>
      </svg>
    </div>
    <p class="item-name">Menu</p>
  </div>
  
</div>

<p class="disclaimer">I'm just the developer. Meet the designer on <a href="https://dribbble.com/shots/6923684-Tab-Bar-Interaction-Freebie" target="_blank"><i class="fab fa-dribbble"></i> Dribbble.</p></a>

* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f3f5fc;
}

.items {
  display: flex;
  background: white;
  border-radius: 24px;
  padding: 9px 24px;
  box-shadow: 0 12px 24px #dbe0f0;
  position: relative;
  transform: scale(.9);
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 36px;
}

.item-img {
  width: 80px;
}

.item-name {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  color: #b9c2cd;
  margin-top: -6px;
  opacity: 0;
}

.upper-bar {
  width: 60px;
  height: 6px;
  background: #ea4c89;
  border-radius: 12px;
  position: absolute;
  top: 0;
  left: 69px;
}

.disclaimer {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  color: #b9c2cd;
  position: relative;
  top: 30px;
}

a {
  text-decoration: none;
  color: #b9c2cd;
}

a:hover {
  color: #ea4c89;
}

$(document).ready(function() {
  $(".browse").click();
})

gsap.set(".item-name", {y: 6})

$(".item").click(function() {
  $(".item").removeClass("active")
  $(".item").mouseleave();
  $(this).mouseenter();
  $(this).addClass("active")
  
  const itemImg = $(this).find(".item-img")
  const tl = gsap.timeline();
    tl.to(itemImg, .3, {scale: 1.2})
    tl.to(itemImg, .3, {delay: -.15, scale: 1, ease: Back.easeOut})
  
  const itemImgFill = $(this).find(".itemFill")
  gsap.to(".itemFill", .3, {fill: "#B9C2CD"})
  gsap.to(itemImgFill, .3, {fill: "#ea4c89"})
  
  const itemImgStroke = $(this).find(".itemStroke")
  gsap.to(".itemStroke", .3, {stroke: "#B9C2CD"})
  gsap.to(itemImgStroke, .3, {stroke: "#ea4c89"})
})

$(".item").hover(function() {
  const itemName = $(this).find(".item-name")
  gsap.to(itemName, .3, {opacity: 1, y: 0, ease: Power1.easeOut})
})

$(".item").mouseleave(function() {
  if ($(this).hasClass("active")) {
  } else {
    const itemName = $(this).find(".item-name")
    gsap.to(itemName, .3, {opacity: 0, y: 6, ease: Power1.easeOut})
  }
})

const itemBrowse = document.querySelector(".browse")
const itemBrowseX = itemBrowse.offsetLeft
const itemProfile = document.querySelector(".profile")
const itemProfileX = itemProfile.offsetLeft
const itemChat = document.querySelector(".chat")
const itemChatX = itemChat.offsetLeft
const itemMenu = document.querySelector(".menu")
const itemMenuX = itemMenu.offsetLeft

const upperBar = document.querySelector(".upper-bar")
const upperBarX = upperBar.offsetLeft

const tl = gsap.timeline();
  tl.to(upperBar, .3, {scaleX: 1.5, ease: Back.easeOut})
  tl.to(upperBar, .3, {scaleX: 1, ease: Back.easeOut})
  tl.pause()

$(itemBrowse).click(function() {
  gsap.to(upperBar, .6, {x: itemBrowseX - 23, ease: Back.easeOut})
  tl.play()
  
  gsap.to(".items", .6, {rotate: -3, ease: Back.easeOut})
  gsap.to(".items", .6, {delay: .15, rotate: 0, ease: Back.easeOut})
  
  setTimeout(function() {
    tl.pause()
    tl.progress(0)
  }, 600)
})

$(itemProfile).click(function() {
  gsap.to(upperBar, .6, {x: itemProfileX - 23, ease: Back.easeOut})
  tl.play()
  
  gsap.to(".items", .6, {rotate: -1, ease: Back.easeOut})
  gsap.to(".items", .6, {delay: .15, rotate: 0, ease: Back.easeOut})
  
  setTimeout(function() {
    tl.pause()
    tl.progress(0)
  }, 600)
})

$(itemChat).click(function() {
  gsap.to(upperBar, .6, {x: itemChatX - 23, ease: Back.easeOut})
  tl.play()
  
  gsap.to(".items", .6, {rotate: 1, ease: Back.easeOut})
  gsap.to(".items", .6, {delay: .15, rotate: 0, ease: Back.easeOut})
  
  setTimeout(function() {
    tl.pause()
    tl.progress(0)
  }, 600)
})

$(itemMenu).click(function() {
  gsap.to(upperBar, .6, {x: itemMenuX - 23, ease: Back.easeOut})
  tl.play()
  
  gsap.to(".items", .6, {rotate: 3, ease: Back.easeOut})
  gsap.to(".items", .6, {delay: .15, rotate: 0, ease: Back.easeOut})
  
  setTimeout(function() {
    tl.pause()
    tl.progress(0)
  }, 600)
})

This Pen is owned by Alex Lerida on CodePen.

See more by @lerida on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript