0

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.

AtheistP3ace
  • 9,611
  • 12
  • 43
  • 43
Wonderman
  • 931
  • 10
  • 21

2 Answers2

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.

Steve
  • 91
  • 6
  • I'm getting Velocity v2 ready for public beta next week, so will see if I can add these easings into it before then. Thanks for pointing at that repo! :-) – Rycochet Jan 27 '18 at 01:14
  • They're now all supported in 2.0.2 (the next beta release) - everything except "Back" was added by 2.0.0 – Rycochet Feb 11 '18 at 18:16
-1

TRY this

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

Zeeshan Ahmed
  • 1
  • 1
  • That's never been how Velocity arguments work for easing, the original examples had the correct commands. – Rycochet Jan 27 '18 at 01:12