Screenshots
Overview
概要
GSAP(GreenSock Animation Platform)は、Webであらゆるものを滑らかに動かすためのJavaScriptアニメーションエンジンです。2024年のWebflowによる買収を経て、2025年のv3.13で従来有料だったプラグインを含む全機能が無料化されました。本サイトは、その実力を読むのではなく体感してもらうことを狙い、イージング・ScrollTrigger・SplitText・Flip・Draggable・MotionPath・MorphSVG・Three.js連携など代表機能を、暗い『観測室』基調の縦スクロール体験として11セクションにまとめています。
How to use
遊び方・使い方
上から下へスクロールするだけで、各セクションが順にGSAPの機能を実演します。イージング比較の『再生』ボタン、Flipのフィルタ／シャッフルやカードのクリック展開、Draggableで投げられるトークンや回転ノブ(キーボード操作対応)、MorphSVGの形状切替ボタンなど、触って試せる仕掛けも各所に。各デモには『コードを見る』トグルがあり、実際のGSAPコードを確認できます。右側のドットナビで任意のセクションへジャンプ可能。デスクトップでは慣性スクロール(ScrollSmoother)が効き、省モーション設定時は演出を抑えた表示に切り替わります。
Tech stack
技術スタック
Next.js 16(App Router)上で、GSAP v3.15と@gsap/reactのuseGSAPフックを用いて実装。ScrollTriggerのpin/scrub、ScrollSmoother、SplitText、Flip、Draggable+Inertia、MotionPath+DrawSVG、MorphSVGなどを1ページに統合。最後にThree.jsのメッシュをGSAPで動かす連携デモ(描画ループはgsap.ticker)も収録し、各機能を独立したクライアントコンポーネントとして構成しています。
Highlights
工夫した点
- 全プラグインの登録を1ファイルに集約し、useGSAP(scope/contextSafe)で各セクションのアニメーションを生成・自動revertすることでメモリリークを防止
- SplitTextはautoSplit+onSplitでフォント確定・リサイズ時の再分割を自動化し、日本語の折り返しにも追従
- matchMediaでデスクトップのみScrollSmootherを有効化し、prefers-reduced-motion時は最終状態を即時表示するアクセシビリティ対応
To improve
改善したい点
- Observerを使ったスナップ式のフルページ・ナビゲーションは未実装
- ピン留め系セクション(横スクロール等)のモバイルでの操作性に改善余地
- ローディング/イントロ演出は今後の課題
What's next
今後の展望
- Physics2D/CustomWiggleなど未紹介プラグインの追加デモ枠
- 3D transform・磁石ホバーを使った演出セクションの拡充
- 配色テーマの切替