Jan 30, 2013

Hiding sidebar in Checkvist with CSS3

Just wanted to share how I've used CSS3 transformations/transitions to hide sidebar in Checkvist.

Nice effect, and easily implemented - by adding a CSS class to the sidebar element (and hiding it afterwards):

div.hideSidebarProgress {

  -webkit-transform: scale(0.01);
  -webkit-transform-origin: 99% 0%;
  -moz-transform: scale(0.01);
  -moz-transform-origin: 99% 0%;
  -o-transform: scale(0.01);
  -o-transform-origin: 99% 0%;
  -ms-transform: scale(0.01);
  -ms-transform-origin: 99% 0%;
  transform: scale(0.01);
  transform-origin: 99% 0%;

  margin-top: -80px;
  -webkit-transition-property: margin-top, transform;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: ease;

  transition-property: margin-top, transform;
  transition-duration: 1s;
  transition-timing-function: ease;

Here I use CSS3 transform to scale the sidebar down, and CSS3 transition for margin-top and for the transform scaling to create the effect.

The benefit - user immediately knows where to look for the "show sidebar" option, when needed.