DEV Community

Cover image for Tap bar with liquid animation using CSS and JavaScript
Pedro Romão
Pedro Romão

Posted on

Tap bar with liquid animation 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:

Example gif

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>
Enter fullscreen mode Exit fullscreen mode

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; }
}
Enter fullscreen mode Exit fullscreen mode

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')
}
Enter fullscreen mode Exit fullscreen mode

Codepen is here:

Top comments (47)

Collapse
 
dolendeori profile image
Dolen Ch. Deori

So satisfying.. Nice work..

Collapse
 
romaopedro199 profile image
Pedro Romão

Thank you!!

Collapse
 
mdirshadengineer profile image
Md Irshad

Mind blowing work

Collapse
 
romaopedro199 profile image
Pedro Romão

Thank you!!

Collapse
 
umbrellac0rp profile image
UmbrellaC0rp

Wow. Really nice. Very smooth and that droplet.. Amazing.

Collapse
 
romaopedro199 profile image
Pedro Romão

Thank you!! I'm working to bring more stuff

Collapse
 
aryamanpunjabi profile image
ARYAMAN.CODES

It's soo amazing 🔥🔥thanks for sharing code this will help me for my learning 🙂🙂

Collapse
 
romaopedro199 profile image
Pedro Romão

Thank you!!

Collapse
 
pcsoftkit profile image
PC Soft Kit

I like your post very much it is very informative and interesting. Your posts always inspire me. Keep sharing such wonderful posts, it motivates a lot. flstudio

Collapse
 
obaino82 profile image
Obaino82

♥️👌

Collapse
 
bishoplee profile image
Olaleye Olalekan Oladipo

Incredible. #stuffsthatilove

Collapse
 
vamsin238 profile image
vamsin238

Nyc work

Collapse
 
brunowmoreno profile image
Bruno Queiroz

Really awesome!

Collapse
 
romaopedro199 profile image
Pedro Romão

Thank you!!

Collapse
 
davebudah profile image
Dave Budah

This is really cool

Collapse
 
romaopedro199 profile image
Pedro Romão

Thank you!!