<button class="menu">
  <svg viewBox="0 0 50 50" class="hamburguer">
    <g>
      <line class="top" x1="5"  y1="5"   x2="45"  y2="5"   stroke="#fff" stroke-width="5" stroke-linecap="round" />
      <line class="mid" x1="5"  y1="20"   x2="45"   y2="20"  stroke="#fff" stroke-width="5" stroke-linecap="round" />
      <line class="bot" x1="5"  y1="35"   x2="45"   y2="35"  stroke="#fff" stroke-width="5" stroke-linecap="round" />
    </g>
  </svg>
</button>
body {
  background: #333;
}
button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  background: none;
  border: 0;
  outline: 0;
  
  .hamburguer {
    width: 30px;
  }
  
  line {
    transform-origin: 0, 0;
  }
}
$(function() {
  var $btn = $('.menu');
  
  var changeHamburguer = function() {
    var tl = new TimelineMax();
    tl.add('start');
    tl.to('.hamburguer .top', 0.2, {
      rotationZ: 45,
      ease: Power1.easeOut
    }, "start")
    .to('.hamburguer .mid', 0.2, {
      opacity: 0,
      ease: Power1.easeOut
    }, "start")
    .to('.hamburguer .bot', 0.2, {
      rotationZ: -45,
      y: -1,
      ease: Power1.easeOut             
    }, "start");
    tl.pause();
    return tl;
  };
  
  var burguerTimeline =  changeHamburguer();
  
  $btn.on('click', function(evt) {
    var $el = $('svg', this);
    
    $el.toggleClass('open');
    
    if ($el.hasClass('open')) {
      // 'x' is visible
      burguerTimeline.restart();
    } else {
      // hamburguer is visible
      burguerTimeline.reverse();
    }
  })
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-3.0.0.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js