title: Recreate bounce easing with spring easing
body: <p>Looking through velocity.js changelog I read:</p>
  
  <blockquote>
    <p>... 2) The back, bounce, and elastic easings have been removed. Use
    spring physics instead. ...</p>
  </blockquote>
  
  <p>I was wondering if there is any simple way to recreate the <code>easeOutBounce</code> effect that is available with jQuery animate using the <code>spring</code> easing, that accepts custom parameters?</p>
  
  <p>By default you can use the <code>spring</code> easing as following:</p>
  
  <pre><code>$('.ball').velocity({ top: ['200px', 'spring']}, { duration: 2000 });
  </code></pre>
  
  <p>The spring easing <strong>can be customized</strong> by specifying <code>[tension, friction]</code> instead of passing just the easing keyword <code>spring</code>. So you can do:</p>
  
  <pre><code>$('.ball').velocity({ top: ['200px', [500, 0]]}, { duration: 2000 });
  </code></pre>
  
  <p>I'm failing to understand which values of friction and tension to use in order to achieve a <a href="http://easings.net/#easeOutBounce" rel="nofollow">easeOutBounce easing</a>. 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.</p>
  
  <p><strong>Is this possible to do in a simple way with velocity.js only</strong>, so I don't need to implement custom easing functions by myself? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('button').on('click', function(){
     $('.ball').css('top', '120px');
     $('.ball').velocity({ top: ['200px', [500, 0]]}, { duration: 2000 });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"&gt;&lt;/script&gt;
  
  &lt;button&gt;Throw ball&lt;/button&gt;
  &lt;div class="display"&gt;
    &lt;div class="ball"&gt;&lt;/div&gt;
    &lt;div class="ground"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>