gsap-showcase

GSAP ショーケース — プレミアムアニメーションのリファレンス

関連資料：GSAP プラグインの個別 API については、該当する公式スキル （gsap-core、gsap-plugins、gsap-timeline、gsap-scrolltrigger など）を呼び出してください。 このスキルが扱うのは、完成された構成のみです。

---

使い方

このスキルは、2 層構成のレシピシステムにおけるセンスのレイヤーです。

• レイヤー 1 — 構成要素：個別の技法スキル（gsap-scroll、gsap-text、 gsap-cursor、gsap-vfx など）が、単独で使えるコピー＆ペースト用のパターンを提供します。
• レイヤー 2 — ショーケース（このスキル）：複数のプラグインを組み合わせた、 洗練された本番品質のアニメーション構成を紹介します。

プレミアムアニメーションのワークフロー：

1. リクエストに近い構成があるか、ショーケースを確認します。
2. 構成の組み立て方を確認します — プラグインの組み合わせ、タイミング、レイヤー構成、レスポンシブ対応。
3. 各コンポーネントの実装には技法スキルを使用します（スクロールトリガーはgsap-scroll、 テキストの表示はgsap-text、インタラクションはgsap-interactなど）。

ショーケースは何を、なぜ行うかを示し、技法スキルはどのように行うかを示します。

---

カテゴリー

カテゴリー	内容	例
hero-sections	ファーストビューのヒーロー構成	テキスト表示 + スクロール + レスポンシブ対応
scroll-experiences	スクロール駆動型の没入感あるシーン	3D カルーセル、ピン留めシーケンス
interactive-scenes	複雑なインタラクティブ構成	複数プラグインを組み合わせたショーケース
page-transitions	ページ全体のトランジション	ページ間のアニメーション
loading-sequences	プレミアムなローディング／表示演出	段階的なローディングアニメーション

---

ショーケースのエントリー形式

references/<category>/ 内の各リファレンスファイルには、次の内容が含まれます。

セクション	内容
ソース	元の CodePen リンクと作者のクレジット
使用プラグイン	必要な GSAP プラグイン（ScrollTrigger、SplitText など）
プレミアムな理由	主なデザイン上の特長 — タイミング、レイヤー構成、仕上がり
構成に関するメモ	プラグインの組み合わせ方、シーケンス戦略、レスポンシブ対応
完全なコード	HTML + CSS + JS 全体（本番環境向けのリファレンス）
調整に関するメモ	コンテンツ、フレームワーク、ブレークポイントに合わせて変更する方法

---

利用可能なショーケース

ショーケース	カテゴリー	プラグイン	リファレンス
レスポンシブ SplitText アニメーター	hero-sections	SplitText、GSDevTools	responsive-splittext-animator
レスポンシブ matchMedia	hero-sections	gsap.matchMedia()	responsive-matchmedia
スクロール連動の縦型ロレックス	scroll-experiences	ScrollTrigger	scrubbed-rolodex
フリーフォーオール（旗艦）	interactive-scenes	SplitText、Physics2D、MotionPath、DrawSVG、CustomBounce、CustomWiggle	free-for-all
複雑な SVG タイムライン	interactive-scenes	タイムラインラベル、SVG attr、GSDevTools	complex-svg-timeline
スクロール連動の Bento ギャラリー	scroll-experiences	ScrollTrigger、Flip	scrubbed-bento-gallery
カードスタック	scroll-experiences	Flip	card-stack
カーブスワイプ	scroll-experiences	MorphSVG	curve-swipe
画像シーケンス	scroll-experiences	ScrollTrigger	image-sequence
無限カードスライダー	scroll-experiences	ScrollTrigger、Draggable	infinite-card-slider

Category References

• references/hero-sections/ — Above-fold hero compositions (2 showcases)
• references/scroll-experiences/ — Immersive scroll scenes (6 showcases)
• references/interactive-scenes/ — Multi-plugin interactive compositions (2 showcases)
• references/page-transitions/ — Full-page transitions (planned)
• references/loading-sequences/ — Premium loading animations (planned)