JSFiddle - React, Tailwind, and code Playground

by the94air

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"></script>
<div class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path id="burger" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16" />
</svg>
</div>
<div>
  <button id="trigger">Trigger</button>
  <button id="back">Back</button>
</div>

CSS

.icon {
  width: 30px;
  height: 30px;
}

JavaScript

let burger = document.getElementById("burger");
let trigger = document.getElementById("trigger");
let back = document.getElementById("back");

trigger.addEventListener("click", function () {
	gsap.to(burger, {duration: 1,  attr: { d: "M5.90064 5.45832L18.9005 19.5118M5.90057 19.5118L18.9005 5.45835" }});
})

back.addEventListener("click", function () {
	gsap.to(burger, {duration: 1,  attr: { d: "M4 8h16M4 16h16" }});
})