「カードを1枚ずつ、立体的にめくるように動かせたら──」
そんなインタラクションにぴったりな演出が、今回ご紹介する「GSAP Stack Cards」です。
この記事では、アニメーションライブラリ「GSAP（GreenSock Animation Platform）」を使って、複数の画像カードがフェード・スライド・縮小を組み合わせながら立体的に動くUIの実装例を紹介します。
見た目に楽しいだけでなく、ユーザーの興味を引きながら情報を整理して提示する効果もあり、UI/UXの向上に直結します。
See the Pen Untitled by masakazuimai (@masakazuimai) on CodePen.
GSAP Stack Cardsとは？
「GSAP Stack Cards」は、名前のとおり 複数のカードが山積み（stack）されており、それが順番にめくられるようなUIアニメーションです。
本アニメーションの特徴は次のとおり：
- 名刺サイズの画像カードをスタック表示
- 「次へ」「前へ」ボタンで順番を切り替え
- カードは下方向に沈みながらフェードアウト
- DOM操作でカードの順番を入れ替え、次のカードを手前に表示
- ダークモードに調和するスタイリッシュな見た目
HTML/CSS/GSAPのみで構成されており、VueやReactなどのフレームワークを使わずとも、モダンで洗練されたUIが実装可能です。
UI構成の考え方
本UIは非常にシンプルな構造です。
親要素である「カードホルダー」の中に複数の .card 要素（画像背景の名刺風ブロック）を入れ、ボタンで前後の入れ替えを制御しています。
入れ替えの操作自体は非常に軽量で、appendChild（後ろへ）や insertBefore（前に戻す）といったDOM操作をGSAPのアニメーションと組み合わせることで、スムーズな体験を実現しています。
動きの仕組み
「次のカード」を押すと、手前のカードが下へ沈むようにスライドし、サイズが縮小、同時にフェードアウトします。
そのカードはDOM内で最後尾に回され、次のカードが前面に表示されます。
逆に「前のカード」では、最後尾にいたカードを先頭に持ってきて、上から現れるように表示します。
これにより、ユーザーがまるで実際にカードをめくっているような体験が得られます。
ダークモード対応デザイン
今回のUIは、背景を#121212ベースにしたダークモード仕様です。
背景色とコントラストのある画像カードが浮き上がるように見えるよう、CSSでは以下のような工夫をしています：
- カードに柔らかいbox-shadow（20px〜40px）で奥行き感を演出
- ボタンにはグラデーションと影をつけて立体感を持たせる
結果として、今風でモダンなWeb UIに仕上がっています。
背景画像はpicsum.photosで手軽に実装
画像には開発者向けのダミー画像サービス「Picsum Photos」を使用しています。
IDを変えるだけでランダムかつ雰囲気のある写真が取得できるため、モックやアニメーション検証に非常に便利です。
本記事では、カード1枚あたりのサイズを 300px × 480px に設定し、軽量かつ見栄えのよいレイアウトにしています。
応用・拡張アイデア
このUIアニメーションは、カスタマイズ次第でさまざまな場面に活用できます。
1. スワイプ対応
GSAPの「Draggable」プラグインを使えば、マウスドラッグやタッチ操作でカードをスワイプしてめくることも可能です。スマホ対応を見据えるなら、UIの重要な進化ポイントになります。
2. カードの裏面表示
transform: rotateY(180deg) を使って、表面に画像、裏面にテキスト（プロフィールや連絡先）を表示する「名刺の裏表UI」も実装可能です。
3. 自動再生
setInterval を使って自動でカードを切り替えることで、スライドショー的な表現にも応用できます。画像ギャラリーやバナー演出に適しています。
4. ランダム画像生成
JSで picsum.photos のIDをランダム生成することで、毎回違う画像を表示するデモや「シャッフル名刺」風の演出にも使えます。
実務や学習にどう活かせるか？
このアニメーションは、ポートフォリオやUI演出に非常に有効です。
たとえば以下のような場面で使えます：
- 制作実績のビジュアル一覧
- サービス紹介のフェードスライド
- EC商品の立体風ギャラリー
- 採用ページのメンバーカード
また、CSSとJavaScriptの連携、GSAPのタイムライン制御、DOMの再配置処理など、実務的なコードの書き方を学ぶ教材としても適しています。
おわりに｜GSAPは「魅せるUI」に不可欠な選択肢
今回ご紹介した「GSAP Stack Cards」は、複雑すぎないのに視覚効果が大きい、学びにも実務にも優れたアニメーションUIです。
GSAPは一見派手に思えますが、実際には非常に扱いやすく、CSSでは表現できない動きもスムーズに制御できます。
複雑なモーション、スクロールトリガー、物理的な動きも簡単に再現できるため、フロントエンド開発者が必ず押さえておきたいライブラリのひとつです。
ぜひこのテンプレートをベースに、自分なりの表現に挑戦してみてください。
一つひとつのカードに、あなたのデザインセンスや工夫が宿るはずです。