Show/Hide with Velocity.js


April 28, 2015

Working with JavaScript animation has taken a back seat ever since changing class names and using CSS transitions have become more supported over the last few years. This year I've been using a bit more JS animation with the help of velocity.js. Here's a little function I wrote to swap out for my css transition show/hide pattern.

var App = {};

// show/hide pattern with js
App.showHideVelocity = function(element, container) {
 $(element).on('click', function(e) {
   e.preventDefault();
   $(element).toggleClass("active");
   var active = $(element).hasClass('active'),
     close = "0",
     open = "250px",
     duration = 900,
     easing = "easeOutCirc";
   $(container).velocity({
     height: active ? open : close
   }, {
     duration: duration,
     easing: easing,
   });
 });
};

$(document).ready(function() {
  App.showHideVelocity('.drawer-button', '.drawer');
});

Latest Thoughts

Thanks for stopping by!