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:

Oldest comments (47)

Collapse
 
phanvantien270290 profile image
Phan Van Tien

awesome !!!

Collapse
 
romaopedro199 profile image
Pedro Romão

Thank you!!

Collapse
 
furkanulutasx profile image
Furkan

Perfect.

Collapse
 
romaopedro199 profile image
Pedro Romão

Thank you!!

Collapse
 
0kyn profile image
Okyn

Nice one!

Collapse
 
romaopedro199 profile image
Pedro Romão

Thank you!!

Collapse
 
dolendeori profile image
Dolen Ch. Deori

So satisfying.. Nice work..

Collapse
 
romaopedro199 profile image
Pedro Romão

Thank you!!

Collapse
 
mdirshaddev profile image
Md Irshad

Mind blowing work

Collapse
 
romaopedro199 profile image
Pedro Romão

Thank you!!

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!!

Collapse
 
therealmecoy profile image
realMecoy🖥🖲

Very cool dude 👏👏👏

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
 
noursaloom profile image
Nour

Wow 😍

Collapse
 
mohamedgehad profile image
mohamedgehad

wowwww nice

Collapse
 
romaopedro199 profile image
Pedro Romão

Thank you!!

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
 
obaino82 profile image
Obaino82

♥️👌

Collapse
 
shadid12 profile image
Shadid Haque

really neat

Collapse
 
funetes profile image
KimHwan

nice code, nice ui 👍

Collapse
 
romaopedro199 profile image
Pedro Romão

Thank you!!