javascript - "Retain" Ripple effect until mouseup

Question

I am trying to re create the ripple effect of material design. Here is my code so far:

$("html").on("mousedown", ".ripple-light", function(evt) {
  var btnlight = $(evt.currentTarget);
  var xx = evt.pageX - btnlight.offset().left;
  var yy = evt.pageY - btnlight.offset().top;
  
  var duration1 = 2000;
  var animationFrame1, animationStart1;
  
  var animationStep1 = function(timestamp1) {
    if (!animationStart1) {
      animationStart1 = timestamp1;
    }
   
    var frame1 = timestamp1 - animationStart1;
    if (frame1 < duration1) {
      var easing1 = (frame1/duration1) * (10 - (frame1/duration1));
      
      var circle1 = "circle at " + xx + "px " + yy + "px";
      var color1 = "rgba(255, 255, 255, .5)";
      var stop1 = 99 * easing1 + "%";

      btnlight.css({
        "background-image": "radial-gradient(" + circle1 + ", " + color1 + " " + stop1 + ", transparent " + stop1 + ")"
      });

      animationFrame1 = window.requestAnimationFrame(animationStep1);
    } else {
      $(btnlight).css({
        "background-image": "none"
      });
      window.cancelAnimationFrame(animationFrame1);
    }
    
  };
  
  animationFrame = window.requestAnimationFrame(animationStep1);

});

.btn { 
    padding: 10px 20px;
    background: #2BBBAD; 
    color: white;
    border: 0;
    font-size: 15px;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    cursor: pointer;
    border-radius: 4px;
    outline: 0;
    text-transform: uppercase;
    user-select: none;
    transition: all .2s;
}
.btn:hover,.btn:focus {
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);

}
.btn:active {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);

}

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<button class="btn ripple-light">Hello, World! </button> 

Answer 1

This can be implemented using a minimal amount of javascript! I hope you can accept a 99%-css solution, as css gives a lot of flexibility to customize your animation to taste - for one thing, it lets us use the transition property, which automatically handles undoing the animation, which is your major request here.

Here's a pure css example where the ripple always originates in the top-left corner of the button; the ripple is a pseudo ::after element with a transition set on its width and height properties.

.button {
  display: inline-block;
  position: relative;
  background-color: rgba(0, 150, 0, 1);
  padding: 15px;
  border-radius: 5px;
  color: rgba(255, 255, 255, 1);
  font-size: 200%;
  font-family: monospace;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
}

.button::after {
  content: ''; display: block; position: absolute;
  left: 0; top: 0;
  pointer-events: none;
  background-color: rgba(255, 255, 255, 0.3);
  width: 0; height: 0; margin-left: 0; margin-top: 0;
  border-radius: 100%;  
  
  transition:
    width 500ms ease-in-out,
    height 500ms ease-in-out,
    margin-left 500ms ease-in-out,
    margin-top 500ms ease-in-out;
}

.button:active::after {
  width: 500px; height: 500px;
  margin-left: -250px; margin-top: -250px;
}

<div class="button">Click me :D</div>