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 (52)

Collapse
 
dolendeori profile image
Dolen Ch. Deori

So satisfying.. Nice work..

Collapse
 
romaopedro199 profile image
Pedro Romão Author

Thank you!!

Collapse
 
mdirshaddev profile image
Md Irshad

Mind blowing work

Collapse
 
romaopedro199 profile image
Pedro Romão Author

Thank you!!

Collapse
 
umbrellac0rp profile image
UmbrellaC0rp

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

Collapse
 
romaopedro199 profile image
Pedro Romão Author

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 Author

Thank you!!

Collapse
 
obaino82 profile image
Obaino82

♥️👌

Collapse
 
bishoplee profile image
Olaleye Olalekan Oladipo

Incredible. #stuffsthatilove

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
 
qq449245884 profile image
qq449245884

Dear Romaopedro,may I translate your all dev articles into Chinese?I would like to share it with more developers in China. I will give the original author and original source.

Collapse
 
romaopedro199 profile image
Pedro Romão Author

Yes, no problem!!

Collapse
 
phanvantien270290 profile image
Phan Van Tien

awesome !!!

Collapse
 
romaopedro199 profile image
Pedro Romão Author

Thank you!!

Collapse
 
furkanulutasx profile image
Furkan

Perfect.

Collapse
 
romaopedro199 profile image
Pedro Romão Author

Thank you!!

Collapse
 
0kyn profile image
Okyn

Nice one!

Collapse
 
romaopedro199 profile image
Pedro Romão Author

Thank you!!

Collapse
 
raibtoffoletto profile image
Raí B. Toffoletto

Amazing 🎉👏. Thanks for sharing!

Collapse
 
ddaypunk profile image
Andy Delso

Woah! Really neat!

Collapse
 
volker_schukai profile image
Volker Schukai

great job

Collapse
 
vamsin238 profile image
vamsin238

Nyc work

What image format should you use in your next project? 🤔