<section class="demo" id="stage">
<div class="demo__grid" id="grid">
<button type="button" class="demo__thumb" data-title="Aurora" data-tone="a"><span>Aurora</span></button>
<button type="button" class="demo__thumb" data-title="Basalt" data-tone="b"><span>Basalt</span></button>
<button type="button" class="demo__thumb" data-title="Cobalt" data-tone="c"><span>Cobalt</span></button>
<button type="button" class="demo__thumb" data-title="Dune" data-tone="d"><span>Dune</span></button>
</div>
</section>.demo {
min-height: 100dvh;
display: grid;
place-items: center;
padding: 24px;
background: #08080a;
color: #f4f4f2;
font-family: "Helvetica Neue", system-ui, sans-serif;
}
.demo__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
width: min(420px, 100%);
}
.demo__thumb {
height: 110px;
border: 0;
border-radius: 14px;
cursor: pointer;
color: #f4f4f2;
font: 13px/1 "Helvetica Neue", system-ui, sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
text-align: left;
padding: 14px;
display: flex;
align-items: flex-end;
}
.demo__thumb[data-tone="a"] { background: linear-gradient(150deg, #6f7bd8, #1c2038); }
.demo__thumb[data-tone="b"] { background: linear-gradient(150deg, #9fa3ab, #1b1d21); }
.demo__thumb[data-tone="c"] { background: linear-gradient(150deg, #4f9bd8, #0e1a25); }
.demo__thumb[data-tone="d"] { background: linear-gradient(150deg, #d8b26f, #221c12); }
.demo__thumb.is-open {
position: fixed;
inset: 10%;
z-index: 5;
height: auto;
padding: 22px;
font-size: 16px;
}const thumbs = gsap.utils.toArray(".demo__thumb");
function toggle(thumb) {
const willOpen = !thumb.classList.contains("is-open");
function apply() {
thumbs.forEach(function (item) {
item.classList.toggle("is-open", willOpen && item === thumb);
});
}
if (!window.Flip) {
apply();
return;
}
const state = Flip.getState(thumb);
apply();
Flip.from(state, {
duration: 0.7,
ease: "power3.inOut",
});
}
thumbs.forEach(function (thumb) {
thumb.addEventListener("click", function () { toggle(thumb); });
});
