<section class="demo">
<button type="button" class="demo__btn" id="toggle" aria-label="Toggle playback">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path id="icon" d="M8 5v14l11-7z"></path>
<path id="pause" d="M6 4h4v16H6zM14 4h4v16h-4z" hidden></path>
</svg>
</button>
</section>.demo {
min-height: 100dvh;
display: grid;
place-items: center;
background: #08080a;
}
.demo__btn {
width: 88px;
height: 88px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
background: #101014;
color: #f4f4f2;
cursor: pointer;
}
.demo__btn svg {
width: 36px;
height: 36px;
fill: currentColor;
display: block;
margin: 0 auto;
}const icon = document.querySelector("#icon");
const pauseD = document.querySelector("#pause").getAttribute("d");
const playD = icon.getAttribute("d");
let playing = false;
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
function flip() {
playing = !playing;
const next = playing ? pauseD : playD;
if (window.MorphSVGPlugin) {
gsap.to(icon, {
morphSVG: next,
duration: reduce ? 0 : 0.45,
ease: "power2.inOut",
});
} else {
icon.setAttribute("d", next);
}
}
document.querySelector("#toggle").addEventListener("click", flip);
gsap.delayedCall(0.6, flip);
