Hamburger Animations

Hamburger-Animations.markdown

Hamburger Animations

A Pen by Joseph Turner on CodePen.

License.

index.jade

a#hamburger.hamburger(href="#")
  i.top
  i.middle
  i.bottom

script.js

(function($) {
  $('#hamburger').on('click', function(e) {
    e.preventDefault();
    $(this).toggleClass('is-open');
  });
})(jQuery);

style.scss

body {
  padding: 40px;
}
*,*:before,*:after {
  box-sizing: border-box;
}

// Variables
$line-weight: 6px;
$line-color: gray;
$hamburger-width: 45px;
.hamburger {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 35px;
  i {
    position: absolute;
    left: calc(50% - #{$hamburger-width / 2});
    width: $hamburger-width;
    height: $line-weight;
    background: $line-color;
    border-radius: $line-weight;
    transition: .3s ease-in-out;
    &.top,
    &.bottom {
      transition: all .3s ease-in-out .3s, transform .3s ease-in-out;
    }
    &.top {
      top: 0;
    }    
    &.middle {
      top: calc(50% - #{$line-weight / 2});
    }    
    &.bottom {
      top: calc(100% - #{$line-weight});
    }
  }
  &.is-open {
    i {
      &.top {
        top: calc(50% - #{$line-weight / 2});
        transition: all .3s ease-in-out, transform .3s ease-in-out .3s;
        transform: rotate(135deg);
      }
      &.middle {    
        transform: rotate(-315deg);
      }      
      &.bottom {
        top: calc(50% - #{$line-weight / 2});
        transform: rotate(135deg);
        transition: all .3s ease-in-out, transform .3s ease-in-out .3s;
      }      
    }
  }
}