Water fill animation GSAP

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<div class="water-graphic">
  <svg class="loading" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="574.558px" height="160px" viewBox="0 0 574.558 70" enable-background="new 0 0 574.558 120" xml:space="preserve">
    <defs>
      <pattern id="water" width=".25" height="1.1" patternContentUnits="objectBoundingBox">
        <path fill="#4A90E2" d="M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z" />
      </pattern>


    </defs>



    <rect class="water-fill" mask="url(#text_mask)" fill="url(#water)" x="-400" y="100" width="1600" height="60" />

  </svg>
</div>
<div class="slider">
  <input class="water-slider" type="range" value="2" min="0" max="2" step="1" list="my-detents" />
  <datalist id="my-detents">
    <option value="1">
  </datalist>
  <div class="labels">
    <h5 class="fast">Fast</h5>
    <h5 class="slow">Slow</h5>
    <h5 class="trickling">Trickling</h5>
  </div>
</div>

CSS

.water-graphic {
  height: 160px;
  width: 160px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #f4f4f4;
}

.button-container {
  text-align: center;
  display: none;
}

.how-bad {
  text-align: center;
  display: none;
}

.water-fill {
  transform-origin: 50% 0%;
  height: 20px;
}

input[type=range] {
  transform: rotate(90deg);
  -webkit-appearance: none;
  -webkit-transform: rotate(90deg);
  width: 180px;
  position: absolute;
  right: 0;
  top: 95px;
  margin-right: -60px;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 180px;
  height: 1px;
  background: #BBBCBD;
  border: none;
  border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #00B398;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #fff;
  margin-top: -14px;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ccc;
}

h5.fast {
  font-size: 14px;
  margin-bottom: 55px;
  position: absolute;
  right: 0;
  margin-right: 70px;
  top: 0;
}

h5.slow {
  font-size: 14px;
  margin-bottom: 55px;
  position: absolute;
  right: 0;
  margin-right: 70px;
  top: 75px;
}

h5.trickling {
  font-size: 14px;
  margin-bottom: 55px;
  position: absolute;
  right: 0;
  margin-right: 70px;
  top: 155px;
}

JavaScript

//WATER ANIMATION
var waterFill = $('.water-fill');

var waterAnimationFull = new TimelineMax({
  paused: true
});
waterAnimationFull.to(waterFill, 3, {
  ease: Sine.easeOut,
  y: -140,
  height: 160
});

var waterAnimationHalf = new TimelineMax({
  paused: true
});
waterAnimationHalf.to(waterFill, 1.7, {
  ease: Sine.easeOut,
  y: -80,
  height: 80
});

var waterAnimation = new TimelineMax({
  paused: true
});
waterAnimationHalf.to(waterFill, 1.7, {
  ease: Sine.easeOut,
  y: -30,
  height: 20
});

var waveAnimation = new TimelineMax({
  paused: true
});
waveAnimation.to(waterFill, 0.7, {
  ease: Linear.easeNone,
  x: -400,
  repeat: -1
});

$(".water-slider").on("change", function() {
  console.log(this.value);

  if (this.value == 0) {

    waveAnimation.play();
    waterAnimationFull.play();
    setTimeout(function() {
      waveAnimation.pause();
    }, 3000);

  } else {

    waveAnimation.play();
    waterAnimation.reverse();
    setTimeout(function() {
      waveAnimation.pause();
    }, 3000);
  }

});