GSAP 目次
1. GSAPの基本
- GSAPとは
- GSAPの概要と特徴
- 他のアニメーションライブラリとの違い
- インストール方法
- CDN経由でのインストール
- npm経由でのインストール
- 基本的な使い方
gsap.to(), gsap.from(), gsap.fromTo()の使い方- 変換オプション（
x, y, scale, rotationなど）
2. アニメーションの基本
- 基本的なアニメーション
- CSSプロパティを使ったアニメーション
- イージングの設定方法
- タイムラインの作成
gsap.timeline()の使い方- 複数のアニメーションを組み合わせる
- アニメーションの遅延と重ね合わせ
- アニメーションの反復と繰り返し
repeat, yoyo, repeatDelayの使い方
3. 高度なアニメーション
- マスタータイムラインの使用
- 複数のタイムラインをネストする
add()でタイムラインにアニメーションを追加
- ラベルと位置指定
label()を使ったタイムラインの管理- 特定のタイミングでアニメーションを追加する
- ステートの変更
- アニメーション開始前の状態を変更する
- 複雑なアニメーションにおけるステート管理
4. 追加機能とプラグイン
- スクロールトリガー
ScrollTriggerを使ったスクロールアニメーション- スクロール位置に基づくアニメーションの開始
pin、scrubなどのオプション
- SVGアニメーション
- GSAPでSVGをアニメーションさせる方法
drawSVGプラグインでパスアニメーション
- ラグドールアニメーション
Physics2DやPhysics3Dを使った物理的な動き
5. パフォーマンス最適化
- アニメーションの最適化
- 高速化のためのベストプラクティス
will-changeとtransformの活用
- パフォーマンスの計測
- ブラウザの開発者ツールでアニメーションパフォーマンスを確認
6. 実践的な使用例
- ホバーアニメーション
- モーダルウィンドウのアニメーション
- 複雑なシーンアニメーション
- 複数の要素を組み合わせてシーン全体をアニメーション化
応用例
- プロジェクトでのGSAPの活用
- ライブラリのカスタマイズ