概要
カードグリッドがスクロールで一斉に表向きへ反転し、ホバーすると個別に裏返って詳細面を見せる、サービス紹介やメンバー一覧向けのアニメーション。
使用技術
・GSAP + ScrollTrigger（スクロール連動）
・CSS 3D変形（perspective / backface-visibility）
実装ポイント
・各カードに `perspective: 1000px`、表裏面に `backface-visibility: hidden` を指定し、`rotateY` で反転しても裏側が透けない構造
・表面は初期状態で `rotateY(180deg)`、裏面は `0deg` に置き、GSAPで角度を切り替えて見せる面を制御
・スクロール発火は `toggleActions: “play none none reverse”` で、戻ると逆再生
・カード群は `stagger: 0.1` で時間差反転、`.front` と `.back` を `”<“` で同時進行させる
・ホバーは `mouseenter` / `mouseleave` で `gsap.to` を呼び、`overwrite: true` で連打時のトゥイーン競合を防止
コアスニペット
.front,
.back {
position: absolute;
backface-visibility: hidden; /* 裏返しても裏側が透けない */
}
.front {
transform: rotateY(180deg); /* 初期状態は裏返し */
}
.back {
transform: rotateY(0deg); /* 初期状態を表向き */
}