<section class="demo" id="stage">
<div class="demo__panels" id="panels">
<article class="demo__panel" data-tone="a"><span>Aurora</span></article>
<article class="demo__panel" data-tone="b"><span>Basalt</span></article>
<article class="demo__panel" data-tone="c"><span>Cobalt</span></article>
<article class="demo__panel" data-tone="d"><span>Dune</span></article>
<article class="demo__panel" data-tone="e"><span>Ember</span></article>
</div>
</section>.demo {
min-height: 100dvh;
display: grid;
place-items: center;
padding: 24px;
background: #08080a;
color: #f4f4f2;
font-family: "Helvetica Neue", Inter, system-ui, sans-serif;
}
.demo__panels {
display: flex;
gap: 8px;
width: 100%;
height: min(320px, 60dvh);
}
.demo__panel {
position: relative;
flex: 1 1 0;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.07);
cursor: pointer;
will-change: flex-grow;
}
.demo__panel span {
position: absolute;
left: 14px;
bottom: 14px;
font-size: 14px;
letter-spacing: -0.01em;
white-space: nowrap;
opacity: 0;
}
.demo__panel[data-tone="a"] { background: linear-gradient(160deg, #6f7bd8, #232741); }
.demo__panel[data-tone="b"] { background: linear-gradient(160deg, #9fa3ab, #1b1d21); }
.demo__panel[data-tone="c"] { background: linear-gradient(160deg, #4f9bd8, #0e1a25); }
.demo__panel[data-tone="d"] { background: linear-gradient(160deg, #d8b26f, #221c12); }
.demo__panel[data-tone="e"] { background: linear-gradient(160deg, #e0705f, #241210); }const stage = document.querySelector("#stage");
const panels = gsap.utils.toArray(".demo__panel");
let autoIndex = 0;
let auto;
function open(index) {
panels.forEach((panel, i) => {
const isOpen = i === index;
gsap.to(panel, {
flexGrow: isOpen ? 3.2 : 1,
duration: 0.75,
ease: "expo.out",
overwrite: "auto",
});
gsap.to(panel.querySelector("span"), {
opacity: isOpen ? 1 : 0,
x: isOpen ? 0 : -8,
duration: 0.5,
ease: "power2.out",
overwrite: "auto",
});
});
}
function startAuto() {
auto = gsap.delayedCall(1.8, () => {
autoIndex = (autoIndex + 1) % panels.length;
open(autoIndex);
startAuto();
});
}
panels.forEach((panel, index) => {
panel.addEventListener("pointerenter", () => {
if (auto) auto.kill();
autoIndex = index;
open(index);
});
});
stage.addEventListener("pointerleave", startAuto);
open(0);
startAuto();
