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>
