<div class="menu_button">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.6, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 136.55 154.72" style="enable-background:new 0 0 136.55 154.72;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#010101;stroke-width:14;stroke-linecap:round;stroke-miterlimit:10;}
</style>
<line id="bottom_right" class="st0" x1="68.28" y1="145.16" x2="126.99" y2="111.26"/>
<line id="x_left" class="st0" x1="126.99" y1="43.46" x2="9.56" y2="111.26"/>
<line id="middle_right" class="st0" x1="126.99" y1="43.46" x2="126.99" y2="111.26"/>
<line id="top_right" class="st0" x1="68.28" y1="9.56" x2="126.99" y2="43.46"/>
<line id="middle_left" class="st0" x1="9.56" y1="43.46" x2="9.56" y2="111.26"/>
<line id="x_right" class="st0" x1="9.56" y1="43.46" x2="126.99" y2="111.26"/>
<line id="bottom_left" class="st0" x1="9.56" y1="111.26" x2="68.28" y2="145.16"/>
<line id="top_left" class="st0" x1="9.56" y1="43.46" x2="68.28" y2="9.56"/>
</svg>


</div>
.menu_button{
  width:50px;
  margin:auto;
  cursor:pointer;
}
#middle_left, #middle_right, #top_right, #bottom_left, #x_right{
  visibility: hidden;
}
console.clear();
const menu_dur = 0.3,
      menu_btn_anim = gsap.timeline({paused: true, defaults: {duration: menu_dur}}),
      menu_btn = document.querySelector(".menu_button");

menu_btn_anim
  .to("#x_left", {drawSVG:"0%"}, 0)
  .fromTo("#top_right,#middle_left, #middle_right, #bottom_left", {autoAlpha:1, drawSVG:"0%"}, {drawSVG:"100%"}, 0)

  .addLabel("hover")
  .to("#x_right, #x_left", {autoAlpha:1, drawSVG:"100%"}, "hover")
  .to(["#top_right,#middle_left, #middle_right, #bottom_left", "#top_left", "#bottom_right"], {drawSVG:"0%"}, "hover")

menu_btn.addEventListener("mouseenter", function() {
  if(!isClicked) {
    menu_btn_anim.tweenTo("hover");
  } else {
    gsap.to(menu_btn, {duration: menu_dur, autoAlpha: 0.4});
  }
});

menu_btn.addEventListener("mouseleave", function() {
  if(!isClicked) {
    menu_btn_anim.reverse();
  } else {
    gsap.to(menu_btn, {duration: menu_dur, autoAlpha: 1});
  }
});
 
var isClicked = false;
menu_btn.addEventListener("click", function() {
  if(!isClicked) {
    menu_btn_anim.play();
    gsap.to(menu_btn, {duration: menu_dur, autoAlpha: 0.4});
  } else {
    menu_btn_anim.tweenTo("hover");
    gsap.to(menu_btn, {duration: menu_dur, autoAlpha: 1});
  }
  isClicked = !isClicked;
});

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js