Flip Card Grid

<!-- Flip Card Grid · NedDev · eigen werk. -->
<!-- benodigd, één keer per pagina: -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>

<div class="jouw-container">
<div class="fcg-grid"><div class="fcg-card"><div class="fcg-in"><div class="fcg-f">01</div><div class="fcg-b">Speed</div></div></div><div class="fcg-card"><div class="fcg-in"><div class="fcg-f">02</div><div class="fcg-b">Craft</div></div></div><div class="fcg-card"><div class="fcg-in"><div class="fcg-f">03</div><div class="fcg-b">Scale</div></div></div><div class="fcg-card"><div class="fcg-in"><div class="fcg-f">04</div><div class="fcg-b">Trust</div></div></div><div class="fcg-card"><div class="fcg-in"><div class="fcg-f">05</div><div class="fcg-b">Motion</div></div></div><div class="fcg-card"><div class="fcg-in"><div class="fcg-f">06</div><div class="fcg-b">Ship</div></div></div></div>
</div>

/* Flip Card Grid · NedDev · eigen werk. */
.fcg-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:10px;padding:10%;background:#fff;font-family:'Switzer',sans-serif}
.fcg-card{perspective:600px}.fcg-in{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d;border-radius:12px}
.fcg-card:hover .fcg-in{transform:rotateY(180deg)}
.fcg-f,.fcg-b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:12px;backface-visibility:hidden;font-weight:800}
.fcg-f{background:#0a0a0a;color:#fff;font-size:clamp(18px,4vw,30px)}.fcg-b{background:#F5480F;color:#fff;transform:rotateY(180deg);font-size:clamp(13px,2.4vw,18px)}

// Flip Card Grid · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var g=window.gsap;if(!g)return;var rm=matchMedia('(prefers-reduced-motion:reduce)').matches;g.set(root.querySelectorAll('.fcg-card'),{opacity:0,y:14});g.to(root.querySelectorAll('.fcg-card'),{opacity:1,y:0,duration:rm?0:.5,stagger:rm?0:.06,ease:'power3.out',delay:.1});
}
init(document.querySelector('.jouw-container'));