Hamburger X Toggle Animation

hamburger-toggle.scss

/*
 *
 *
 * Hamburger X Toggle
 *
 *
 */
#nav-toggle { 
  cursor: pointer; 
  @include padding(1em 0.5em 1em 1em);
  span, span:before, span:after {
    cursor: pointer;
    border-radius: 1px;
    height: 3px;
    width: 24px;
    background: white;
    position: absolute;
    display: block;
    content: '';
  }
  span:before {
    top: -6px; 
  }
  span:after {
    bottom: -6px;
  }
  span, span:before, span:after {
    @include transition(all 300ms ease-in-out);
  }
  &.active span {
    background-color: transparent;
  }
  &.active span:before, &.active span:after {
    top: 0;
  }
  &.active span:before {
    @include transform (rotate(45deg));
  }
  &.active span:after {
    @include transform (rotate(-45deg));
  }
}
// END TOGGLE

toggle.coffee

$(document).ready ->

	document.querySelector('#nav-toggle').addEventListener 'click', ->
		@classList.toggle 'active'