Looking through change.js changelog, I read:
... 2) The back, rebounds and elastic weakenings are removed. using spring ....
I was wondering if there is any easy way to recreate the easeOutBounce effect, available via jQuery animation, using spring easing that accepts custom parameters?
By default, you can use spring attenuation as follows:
$('.ball').velocity({ top: ['200px', 'spring']}, { duration: 2000 });
spring easing can be configured by specifying [tension, friction] instead of passing only the easing spring keyword. So you can do:
$('.ball').velocity({ top: ['200px', [500, 0]]}, { duration: 2000 });
I don’t understand what friction and stress values to use to achieve easeOutBounce easing . I try to throw the ball when it reaches 200 pixels, but instead it acts as a “free” spring, going below the ground line, and not bouncing.
Is it possible to do this in a simple way using velocity.js only , so I don’t need to perform my own relief functions 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>
source share