はじめに
画面全面に並べた小さな矩形を scaleX で開閉するシャッターです。
この記事では next-transition-router への依存を外し、React の state で画像ビューを切り替える最小デモにしています。ページ遷移へ戻す場合も、runShutter() の中で state を変えている箇所をルーターの next() に置き換えれば同じ考え方で使えます。
今回作るもの
- 主役: 行ごとに方向が変わるグリッドシャッター
- トリガー: ボタンで画像ビューを切り替える
- 対象要素: 画面を覆う
ROWS x COLSのセル - 再利用先: ページ遷移、ギャラリー切り替え、作品詳細のビュー変更
セル自体は見た目の要素なので React が担当し、GSAP は blockRefs.current に入った DOM の scaleX だけを動かします。これで DOM 生成とアニメーションの責務が分かれます。
動きの組み立て
最初の to() では、行ごとにセルを横へ広げて画面を覆います。偶数行は左から、奇数行は右から始まるように transform-origin と stagger.from を揃えています。
画面が覆われたタイミングで setActiveIndex(nextIndex) を呼び、裏側の画像を差し替えます。その後、全セルを中央起点の stagger で閉じることで、切り替わった画像が見える構成です。
調整しやすい値
ROWS: 行数。少ないほど大きな面で切り替わるCOLS: 列数。多いほど細かいシャッターになるeach: セルごとの遅延。大きいほど波が強くなるduration: 閉じる速さと開く速さ
画像は添付ファイル内のものを使わず、Unsplash のフリー写真 URL に差し替えています。