How to make a beautiful liquid animation in a tap bar menu using css and javascript

In this article, we will create a tap bar that you can use in your mobile projects. Let's first look at what are we building:

Let's code...

HTML

<div class="container">
  <div class="bar">
    <div class="bar-item pre-active" onclick="changeActive(this)">
      <div class="bar-fluid"></div>
      <div class="drop"></div>
      <i class="far fa-calendar-alt"></i>
    </div>
    <div class="bar-item" onclick="changeActive(this)">
      <div class="bar-fluid"></div>
      <div class="drop"></div>
      <i class="far fa-sticky-note"></i>
    </div>
    <div class="bar-item" onclick="changeActive(this)">
      <div class="bar-fluid"></div>
      <div class="drop"></div>
      <i class="far fa-bell"></i>
    </div>
    <div class="bar-item" onclick="changeActive(this)">
      <div class="bar-fluid"></div>
      <div class="drop"></div>
      <i class="far fa-address-book"></i>
    </div>
  </div>
</div>

In the HTML code, the "bar" class is the container of our tap bar and "bar-item" class are the buttons that trigger the animations.

Now let's look at the CSS:

CSS

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fc5c65;
}

.bar {
  padding: 0px 10px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 10px 10px 20px 20px;
  box-shadow: 3px 3px 0px 0px rgb(235 59 90);
}

.bar .bar-item {
  position: relative;
  overflow: hidden;
  padding: 20px 25px;
  cursor: pointer;
}

.bar .bar-item i {
  z-index: 1;
  position: relative;
  color: #a4b0be;
  transition: all .3s ease-in-out;
}

.bar .bar-item.pre-active i {
  color: #fc5c65;
}

.bar .bar-item.active i {
  color: #fc5c65;
  animation: colour 1s ease-in-out;
}

.bar .bar-item.active .bar-fluid {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #fc5c65;
  width: 100%;
  height: 0px;
  animation: fluid 1s ease-in-out;
}

.bar .bar-item.active .bar-fluid:before {
  content: '';
  position: absolute;
  top: 0px;
  left: -50%;
  background-color: #ffffff;
  width: 110%;
  height: 400%;
  border-radius: 50%;
}

.bar .bar-item.active .bar-fluid:after {
  content: '';
  position: absolute;
  top: 0px;
  right: -50%;
  background-color: #ffffff;
  width: 110%;
  height: 400%;
  border-radius: 50%;
}

.bar .bar-item.active .drop {
  position: absolute;
  top: -2.5px;
  left: 30.5px;
  background-color: #fc5c65;
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  animation: drop 1s ease-in-out;
}

@keyframes colour {
  0% { color: #a4b0be; }
  55% {
    color: #a4b0be;
    transform: scale(1);
  }
  60% {
    color: #fc5c65;
    transform: scale(1);
  }
  70% { transform: scale(1.1); }
  80% { transform: scale(1); }
}

@keyframes fluid {
  0% { height: 0px; }
  30% { height: 10px; }
  100% { height: 0px; }
}

@keyframes drop {
  20% { top: -2.5px; }
  50% { top: 21px; }
  51% { top: -2.5px; }
}

JavaScript

const preactiveItem = document.querySelector('.pre-active')
const barItems = document.querySelectorAll('.bar-item')

function changeActive (newActive) {
  preactiveItem.classList.remove('pre-active')
  barItems.forEach(element => {
    element.classList.remove('active')
  })
  newActive.classList.add('active')
}

Codepen is here:

Thank you for reading, and let's connect!

Thank you for reading, and feel free to connect with me on Linkedin and check my Youtube channel.

And if you like my work and want to support me, you can buy me a coffee by clicking here.