概要
サムネイルをクリックすると、その画像がメイン枠へ滑らかに移動し、元のメイン画像がサムネイル位置へ入れ替わる、商品ギャラリー向けのレイアウトトランジション。
使用技術
・GSAP + Flip プラグイン
・CSS Grid（`grid-template-areas` によるレイアウト定義）
実装ポイント
・レイアウトはCSS Gridの `grid-template-areas`（”main” と “sub1〜3″）で定義し、各要素の位置は `data-grid` 属性（img-1〜4）と `grid-area` の対応で決まる
・アニメーションの肝はFlipの「状態記録→DOM変更→差分アニメ」の流れ。クリック時に `Flip.getState(products)` で現在位置を記録し、クリック要素と現メイン要素の `data-grid` を交換するだけでレイアウトを更新
・位置変更後に `Flip.from(state, …)` を呼ぶと、旧位置から新位置への移動を自動補間。`scale: true` でサイズ差を、`absolute: true` で移動中のガタつきを解消
・メイン画像（img-1）自身のクリックは `if (el === active) return` で無視し、無駄な再生を防止
コアスニペット
// 1. 現在の状態を記録
const state = Flip.getState(products);
// 2. 属性（グリッド位置）を交換
const currentGrid = el.dataset.grid;
active.dataset.grid = currentGrid;
el.dataset.grid = "img-1";
active = el;
// 3. アニメーション実行
Flip.from(state, {
duration: 0.4,
absolute: true,
ease: "power2.inOut",
scale: true,
});