Recreate bounce easing with spring easing

Question

Looking through velocity.js changelog I read:

... 2) The back, bounce, and elastic easings have been removed. Use spring physics instead. ...

I was wondering if there is any simple way to recreate the easeOutBounce effect that is available with jQuery animate using the spring easing, that accepts custom parameters?

By default you can use the spring easing as following:

$('.ball').velocity({ top: ['200px', 'spring']}, { duration: 2000 });

The spring easing can be customized by specifying [tension, friction] instead of passing just the easing keyword spring. So you can do:

$('.ball').velocity({ top: ['200px', [500, 0]]}, { duration: 2000 });

I'm failing to understand which values of friction and tension to use in order to achieve a easeOutBounce easing. I'm trying to make the ball bounce when it reaches 200px - but instead it acts as a "loose" spring, going below the ground line instead of bouncing.

Is this possible to do in a simple way with velocity.js only, so I don't need to implement custom easing functions by myself?

$('button').on('click', function(){
   $('.ball').css('top', '120px');
   $('.ball').velocity({ top: ['200px', [500, 0]]}, { duration: 2000 });
});

.display {
  width: 240px;
  height: 280px;
  position: relative;
  border: 1px solid #000;
}
.ball {
  position: absolute;
  top: 120px;
  left: 40px;
  width: 20px;
  height: 20px;
}
.ball:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background: red;
}
.ground {
  position: absolute;
  top: 220px;
  left: 0;
  width: 100%;
  height: 1px;
  background: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script>

<button>Throw ball</button>
<div class="display">
  <div class="ball"></div>
  <div class="ground"></div>
</div>

Answer 1

Being the guy that helped creating that easing in Velocity, I understand it's not possible to create bounce and elastic easings with it. But if you'll ask Julian (creator of Velocity) he'll probably say you're better off with a spring easing than with bounce.

Having said that, your best bet is to register these easings yourself on Velocity. Check out explanations at the bottom of this thread.