DEV Community

Cover image for Tap bar with liquid animation using CSS and JavaScript
romaopedro199
romaopedro199

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:

Discussion (52)

Collapse
dolendeori profile image
Dolen Ch. Deori

So satisfying.. Nice work..

Collapse
romaopedro199 profile image
romaopedro199 Author

Thank you!!

Collapse
mdirshaddev profile image
Md Irshad

Mind blowing work

Collapse
romaopedro199 profile image
romaopedro199 Author

Thank you!!

Collapse
umbrellac0rp profile image
UmbrellaC0rp

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

Collapse
romaopedro199 profile image
romaopedro199 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
romaopedro199 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
romaopedro199 Author

Yes, no problem!!

Collapse
phanvantien270290 profile image
Phan Van Tien

awesome !!!

Collapse
romaopedro199 profile image
romaopedro199 Author

Thank you!!

Collapse
furkanulutasx profile image
Furkan

Perfect.

Collapse
romaopedro199 profile image
romaopedro199 Author

Thank you!!

Collapse
0kyn profile image
Okyn

Nice one!

Collapse
romaopedro199 profile image
romaopedro199 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

Collapse
vincenteliezer profile image
Vincent Eliezer (Ram)

great one!

Collapse
amirahosseini profile image
amir

nice job man

Collapse
jishan profile image
G Shan

WWOO

Collapse
guscarpim profile image
Gustavo Scarpim

Niceee!

Collapse
muhammadzaky profile image
muhammad zaky

cool

Collapse
funetes profile image
KimHwan

nice code, nice ui 👍

Collapse
romaopedro199 profile image
romaopedro199 Author

Thank you!!

Collapse
sjanjan profile image
lijian

well done

Collapse
mohamedgehad profile image
mohamedgehad

wowwww nice

Collapse
romaopedro199 profile image
romaopedro199 Author

Thank you!!

Collapse
vcna0 profile image
Vcna-0

Amazing ! Thank you ! 😃🎉

Collapse
shadid12 profile image
Shadid Haque

really neat

Collapse
therealmecoy profile image
realMecoy🖥🖲

Very cool dude 👏👏👏

Collapse
romaopedro199 profile image
romaopedro199 Author

Thank you!!

Collapse
davebudah profile image
Dave Budah

This is really cool

Collapse
romaopedro199 profile image
romaopedro199 Author

Thank you!!

Collapse
bpsagar profile image
Sagar Chakravarthy

😍😍 Wow!!

Collapse
brunowmoreno profile image
Bruno Queiroz

Really awesome!

Collapse
romaopedro199 profile image
romaopedro199 Author

Thank you!!

Collapse
ayanweb profile image
Ayan-web

thats the collest navigation I ever saw keep up the good work