順番に動かす（Sequence）
このページでは、GSAPのtimeline()とFramer Motionを使ったシーケンスアニメーションの実装パターンをインタラクティブなデモとコードで確認できます。
シーケンスアニメーションとは、複数の要素や動きを「順番に」制御するアニメーション。カード一覧の順次出現・ローディングのステップ表示・複雑なUIの状態遷移など、実務で頻出するパターン。
GSAPはtimeline()でアニメーションの順序・タイミング・再生制御を直感的に書ける。Framer MotionはstaggerChildrenやuseAnimateで対応するが、複雑な制御になるほどGSAPが有利。
① 順番に出現（staggerChildren）
② staggerグリッド
③ ローディングシーケンス
④ タイムライン再生・逆再生
⚠️ Framer Motionでは逆再生・一時停止の制御が困難
Framer Motionはタイムラインの再生方向を動的に変更する仕組みを持っていません。useAnimateのanimate()はPromiseベースで 順次実行するため、逆再生を実現するには手動でアニメーションを逆順に定義し直す必要があります。 GSAPタブでtimeline.reverse()の動作を確認してください。
実装方法の比較
| 項目 | Framer Motion | GSAP |
|---|---|---|
| stagger | staggerChildren + delayChildren で子要素を時間差アニメーション | staggerオプションで直感的に指定。配列・グリッド・カスタム関数も対応 |
| シーケンス制御 | useAnimateのanimate()を順番に呼ぶ（async/await） | timeline()にtweenを並べるだけ。位置パラメータで重ねも自在 |
| 逆再生 | 非対応（reverseは手動実装が必要） | timeline.reverse()で即座に逆再生 |
| 一時停止・再開 | 非対応（手動管理が必要） | timeline.pause() / timeline.resume() でシンプルに制御 |
| 再生速度変更 | 非対応 | timeline.timeScale(2) で再生速度を変更 |
🤖 AIプロンプトテンプレート
Next.js + GSAP でシーケンスアニメーションを実装してください。 - gsap.timeline() で複数要素を順番にアニメーション - stagger で時間差出現 - 再生・逆再生・リセットボタンを実装 - useGSAPフックとcontextSafeを使用 - TypeScript / Tailwind CSS v4 を使用
同じカテゴリの他のページ
文字を演出する（Text Animation）| UI Memo
GSAPのSplitText・ScrambleTextで実装する文字アニメーションのサンプル。1文字ずつフェード・スライド・波・スクランブル・バラけて再集合など、テキスト演出のUIパターン実例集。
動きの質感を選ぶ（Easing）
イージングの違いを体験で比較。power・back・bounce・elasticなどGSAP・Framer Motion・CSS Transitionのeaseを一覧・比較できるUIパターン実例集。
スクロールで物語る（Scroll Storytelling）
GSAPのScrollTriggerで実装するスクロール演出のサンプル。scrub・pin・横スクロール・パララックスなど、スクロールに連動した高度なアニメーションのUIパターン実例集。デモ・コード付き。
Zenn