Easing function with Velocity.js don't work properly

Question

I call a velocity.js function to show/hide a navbar up to the viewport. I have two functions to achieve this.

function openNav(){
$('.navigation').velocity({height: "87vh"},{duration: 1000, display: 'block'}); }


function closeNav(){
$('.navigation').velocity({height: '0vh'}, {duration: 1000, display: 'none'}); }

Now I want to add different easing function in both animations.

So, From Velocity.js Easing Doc :

function openNav(){
$('.navigation').velocity({height: "87vh"},{duration: 1000, easing: 'easeOutBounce' , display: 'block'}); }


function closeNav(){
$('.navigation').velocity({height: '0vh'}, {duration: 1000, easing: 'easeOutElastic' , display: 'none'}); }

But easing functions aren't properly applied and I see the default behavior

I've also tried to add easing in this way:

$element.velocity({height: '0vh'}, "easeOutElastic");

I'd like to know where I'm wrong.

Answer 1

Back, bounce, and elastic easing types are not available in standard velocity.js. From the documentation:

Pre-packaged into Velocity are jQuery UI's easings, except for the back, bounce, and elastic easing types .

But take a look at Ease+ for Velocity.js , it adds Back, Elastic, Bounce to velocity.js.

Answer 2

TRY this

function openNav() { $('.navigation').velocity({ height: "87vh"},{duration: 1000, display: 'block'},{easing: 'easeOutBounce' }); }