WebサイトやアプリのUIに「くるっ」とした動きが加わるだけで、体験は一気にリッチになります。
今回は、JavaScriptアニメーションライブラリ GSAP（GreenSock Animation Platform）を使って、カードアニメーションの2つのパターン──「フリップ（回転）」と「スタック（積み重ね）」を構築する方法をご紹介します。
名刺のようなカードがクリックに反応して回転したり、山積みのカードが1枚ずつめくられたり──
そんなインタラクティブなUI演出が、GSAPとCSSだけで実装可能です。
この記事で紹介する内容
- カード要素がくるっと回転して切り替わるフリップ演出
- 複数カードが山積みで順番にめくられるスタック演出
- 前後のカードを入れ替えながらアニメーションする方法
- 回転軸と方向（transform-origin）の指定方法
- ダークモードや立体感を取り入れた今風デザイン
- クリックボタンで「次へ」「前へ」の切り替えを実装
コードはCodePenにて動作確認できます。
パターン1：カードフリップ（回転アニメーション）
デモ（CodePen）
See the Pen
Untitled by masakazuimai (@masakazuimai)
on CodePen.
回転アニメーションでUIに「躍動感」を
カードフリップは、名刺サイズのカードがY軸またはX軸を中心に回転することで、次のカードが「めくられる」ように登場する演出です。
カードそのものが回転して切り替わることで、よりダイレクトでダイナミックな印象を与えることができます。
UI構成と動きの考え方
UIの構造は以下のようにシンプルです。
.card-holder：カード全体を包む領域。perspectiveを加えて立体的に.card：背景画像付きのカード要素。複数重ねて表示- 「次へ」「前へ」ボタンで順番切り替え
アニメーションの流れ（次のカード）
- 手前のカードが
X軸に90度回転して消える - DOMの最後に移動して裏側でリセット
- 回転角
-90度 → 0度に戻して再登場
前のカードに戻すとき
- 最後尾のカードを先頭に移動
- 初期状態で
90度回転させておく 0度まで回転して表示
GSAPの .to() や .set() を活用することで、「視覚的には回転しながら切り替わっている」ように見せつつ、実際にはDOMを入れ替えて再利用しているのがポイントです。
回転の起点は「transform-origin」で指定する
カードの回転は、transform-origin の設定で表現が大きく変わります。
center bottom：下辺を支点に上に向かって回転（めくる感じ）center top：上辺を支点に下に倒れるような回転center center：中心からぐるりと回る回転（回転ドア風）
今回は名刺風のカードを「上にめくる」ように演出したかったため、center bottom → 回転 → center top という切り替えを採用しています。
パターン2：カードスタック（積み重ねアニメーション）
デモ（CodePen）
See the Pen
Untitled by masakazuimai (@masakazuimai)
on CodePen.
カードスタックの特徴
「GSAP Stack Cards」は、複数のカードが山積み（stack）されており、それが順番にめくられるようなUIアニメーションです。
- 名刺サイズの画像カードをスタック表示
- 「次へ」「前へ」ボタンで順番を切り替え
- カードは下方向に沈みながらフェードアウト
- DOM操作でカードの順番を入れ替え、次のカードを手前に表示
- ダークモードに調和するスタイリッシュな見た目
動きの仕組み
「次のカード」を押すと、手前のカードが下へ沈むようにスライドし、サイズが縮小、同時にフェードアウトします。
そのカードはDOM内で最後尾に回され、次のカードが前面に表示されます。
逆に「前のカード」では、最後尾にいたカードを先頭に持ってきて、上から現れるように表示します。
これにより、ユーザーがまるで実際にカードをめくっているような体験が得られます。
UI構成の考え方
親要素である「カードホルダー」の中に複数の .card 要素（画像背景の名刺風ブロック）を入れ、ボタンで前後の入れ替えを制御しています。
入れ替えの操作自体は非常に軽量で、appendChild（後ろへ）や insertBefore（前に戻す）といったDOM操作をGSAPのアニメーションと組み合わせることで、スムーズな体験を実現しています。
2パターンの比較
| 項目 | カードフリップ | カードスタック |
|---|---|---|
| 動きの特徴 | X軸/Y軸で回転して切り替え | 下方向にスライド＋フェードアウト |
| 視覚的な印象 | ダイナミック・立体的 | スムーズ・シネマティック |
| DOM操作 | appendChild + rotationX | appendChild + translateY + scale |
| 向いている用途 | プロフィール・名刺・商品詳細 | ギャラリー・スライドショー・実績一覧 |
なぜGSAPを使うのか？
CSSでもtransform: rotateX()は使えますが、GSAPを使うメリットは圧倒的です。
- イージングやタイミングの制御が簡単
- 複数ステップのアニメーションが連続で記述できる
- onCompleteイベントでDOM操作と連携しやすい
rotationX,rotationYなどのプロパティが明確に扱える
GSAPは「回転」や「位置変更」などのトランスフォーム系アニメーションに極めて強く、柔軟に拡張しやすいのが特長です。HTML/CSS/GSAPのみで構成されており、VueやReactなどのフレームワークを使わずとも、モダンで洗練されたUIが実装可能です。
ダークモード対応デザイン
今回のデモは以下のデザイン要素を意識して調整しています：
| 要素 | スタイル |
|---|---|
| 背景色 | #121212ベースのダークモード仕様 |
| カードサイズ | フリップ: 640px × 400px / スタック: 300px × 480px |
| 背景画像 | picsum.photos のランダム画像 |
| ボタン | グラデーションと影で立体感のあるモダンな配色 |
| 影と立体感 | box-shadow, perspective, backface-visibility を活用 |
背景色とコントラストのある画像カードが浮き上がるように見えるデザインで、今風でモダンなWeb UIに仕上がっています。
応用・拡張アイデア
これらのカードアニメーションは、カスタマイズ次第でさまざまな場面に活用できます。
表裏の切り替え（名刺裏表）
カードの裏面に transform: rotateX(180deg) を指定し、表面と裏面を front / back クラスで切り替えると、フリップアニメーションになります。
「プロフィール表示」「連絡先情報」「商品詳細」などに最適です。
スワイプ操作の追加
GSAPの Draggable プラグインを使えば、マウスドラッグやタッチ操作でカードをスワイプしてめくることも可能です。
スマホ対応を視野に入れるなら、UX向上につながる重要な要素です。
タイムライン管理と自動再生
複数のアニメーションを連続して発火させるなら、gsap.timeline() を使うと管理がしやすくなります。
また、setInterval を使って自動でカードを切り替えることで、スライドショー的な表現にも応用できます。画像ギャラリーやバナー演出に適しています。
実務や学習にどう活かせるか？
このアニメーションは、ポートフォリオやUI演出に非常に有効です。
たとえば以下のような場面で使えます：
- 制作実績のビジュアル一覧
- サービス紹介のフェードスライド
- EC商品の立体風ギャラリー
- 採用ページのメンバーカード
また、CSSとJavaScriptの連携、GSAPのタイムライン制御、DOMの再配置処理など、実務的なコードの書き方を学ぶ教材としても適しています。
まとめ｜GSAP × カードアニメーションでUIをアップグレード
今回紹介した「カードフリップ」と「カードスタック」は、GSAPとCSSを使って比較的シンプルな構成で実装できます。
- フリップ：X軸回転で「めくる」動きを表現。名刺やプロフィールカードに最適
- スタック：スライド＋フェードで「重なったカードをめくる」体験。ギャラリーや実績一覧に最適
GSAPはスムーズなアニメーション表現を得意としており、タイミング制御やDOMとの連携も柔軟です。
ちょっとした見た目の工夫で、ユーザー体験をアップグレードできる強力なツールと言えるでしょう。
まずは今回のサンプルをベースに、自分なりのレイアウトや演出にアレンジしてみてください。