<svg id="hamburger" class="Header__toggle-svg" viewbox="0 0 60 40">
        <g stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
          <path id="top-line" d="M10,10 L50,10 Z"></path>
          <path id="middle-line" d="M10,20 L50,20 Z"></path>
          <path id="bottom-line" d="M10,30 L50,30 Z"></path>
        </g>
      </svg>

      <p>Just a lil' hamburger - hover it</p>

body {
  background-color: #77adba;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-direction: column;
  text-align: center;
  color: #fff;
  font-size: 1.2rem;
  font-family: Futura, Trebuchet MS, Arial, sans-serif;
}

svg {
  width: 120px;
}

#top-line,
#bottom-line,
#middle-line {
  transform-box: fill-box;
  transform-origin: center;
}

svg:hover {
  #top-line {
    animation: down-rotate 0.6s ease-out both;
  }
  #bottom-line {
    animation: up-rotate 0.6s ease-out both;
  }
  #middle-line {
    animation: hide 0.6s ease-out forwards;
  }
}

@keyframes up-rotate {
  0% {
    animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53);
    transform: translateY(0px);
  }
  30% {
    transform-origin: center;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: translateY(-10px);
  }
  100% {
    transform-origin: center;
    transform: translateY(-10px) rotate(45deg) scale(0.9);
  }
}

@keyframes down-rotate {
  0% {
    animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53);
    transform: translateY(0px);
  }
  30% {
    transform-origin: center;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: translateY(10px);
  }
  100% {
    transform-origin: center;
    transform: translateY(10px) rotate(-45deg) scale(0.9);
  }
}

@keyframes hide {
  29% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

// const hamburger = gsap.timeline({ paused: true });

// gsap.set(["#top-line", "#bottom-line"], {
//  transformOrigin: "center"
// });

// hamburger
//  .to("#top-line", {
//    y: 10,
//    ease: "back.in(1.4)"
//  })
//  .to(
//    "#bottom-line",
//    {
//      y: -10,
//      ease: "back.in(1.4)"
//    },
//    0
//  )
//  .set("#middle-line", {
//    opacity: 0
//  })
//  .to("#top-line", {
//    rotate: 45,
//    ease: "back.out(1.4)"
//  })
//  .to(
//    "#bottom-line",
//    {
//      rotate: -45,
//      ease: "back.out(1.4)"
//    },
//    "<"
//  );

// let burger = document.querySelector("#hamburger");

// burger.addEventListener("click", (e) => {
//  hamburger.play();
// });