概要
色タグのチェックボックスで絞り込むと、該当アイテムだけが残り、グリッドが詰め直される様子がアニメーションする、ポートフォリオや商品一覧向けのフィルタリングUI。
使用技術
・GSAP + Flip プラグイン
・CSS Grid（`auto-fill` + `minmax` の自動折り返し）/ チェックボックス擬似要素によるトグルUI
実装ポイント
・`Flip.getState(items)` で現在のグリッド状態を保存してから、チェック中のタグに一致するアイテムのみ `display: flex`／残りを `display: “none”` に切り替え、`Flip.from` で再配置を滑らかに補間
・表示・非表示の出入りは `onEnter`／`onLeave` コールバックで個別制御。現れる要素は `opacity: 0, scale: 0.9` からフェードイン、消える要素はフェードアウトさせて唐突さをなくす
・`absolute: true` + `scale: true` で、詰め直しによる位置とサイズの変化を破綻なくアニメーション
・「All」ボタンは全フィルターのチェックを一括操作し、逆に個別チェックが全て揃ったら `allCheckbox.checked` を同期させる双方向連動
・フィルターボタンはチェックボックスを `display: none` で隠し、`input:checked ~ .bg-overlay` の擬似セレクタでJSに頼らず選択状態の背景を表示
コアスニペット
// 1. 現在の状態を保存
const state = Flip.getState(items);
// 2. フィルタリング（一致は flex、残りは none）
items.forEach(item => {
const isMatch = activeIds.some(id => item.classList.contains(id));
item.style.display = isMatch ? "flex" : "none";
});
// 3. Flipアニメーションの実行
Flip.from(state, {
duration: 0.4, ease: "power2.inOut",
absolute: true, scale: true,
onEnter: elements => gsap.fromTo(elements, {opacity: 0, scale: 0.9}, {opacity: 1, scale: 1, duration: 0.4}),
onLeave: elements => gsap.to(elements, {opacity: 0, scale: 0.9, duration: 0.3}),
});