Water ripple

Testing water ripple animation

by Nihar Raote

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TimelineLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<button class="btn water-ripple"> Drink some water! 
  <div class="centre-ripple"></div>
  <div class="first-ripple"></div>
  <div class="last-ripple"></div>
</button>

CSS

.btn {
  position: absolute;
  height: 100px;
  width: 210px;
  left: 45%;
  top: 30%;
  background-color: #4facfe;
  border-radius: 40px;
}

.centre-ripple {
  position: absolute;
  background-color: #a1c4fd;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  bottom: 22px;
  left: 80px;
  opacity: 0;
}

.first-ripple {
  position: absolute;
  background-color: #a1c4fd;
  height: 70px;
  width: 70px;
  border-radius: 50%;
  bottom: 12px;
  left: 70px;
  opacity: 0;
}

.last-ripple {
  position: absolute;
  background-color: #a1c4fd;
  height: 90px;
  width: 90px;
  border-radius: 50%;
  bottom: 3px;
  left: 60px;
  opacity: 0;
}

JavaScript

document.querySelector('.water-ripple').addEventListener('click', startAnimation);
console.log('Hey!!')

function startAnimation() {
console.log("I'm here!1")
	const centreRipple = document.querySelector('.centre-ripple');
  const firstRipple = document.querySelector('.first-ripple');
  const lastRipple = document.querySelector('.last-ripple');
  
  let tl = new TimelineLite();
  tl.to(centreRipple, 0.2, {opacity: 1})
    .to(firstRipple, 0.2, {opacity: 1}, '-=0.2')
    .to(lastRipple, 0.2, {opacity: 1}, '-=0.2')
    .to(centreRipple, 1.5, {scale: 1.5, opacity: 0})
    .to(firstRipple, 1.5, {scale: 1.5, opacity: 0}, '-=1.5')
    .to(lastRipple, 1.5, {scale: 1, opacity: 0}, '-=1.5')
    .to(centreRipple, 0, {scale: 0})
    .to(firstRipple, 0, {scale: 0})
    .to(lastRipple, 0, {scale: 0});
}