はじめに
この文書は、GSAP（GreenSock Animation Platform）をCDN経由で読み込み、すぐにアニメーションを使うための実践ガイドです。GSAPとは何か、CDNでの読み込み方法、プレーンHTMLやWordPressでの導入手順、GSAPを使った基本的なアニメーションの書き方までを順を追って解説します。
目的
GSAPを手早く試したい人が、環境構築で迷わないようにすることが目的です。最小限の手順で動く例を示しますので、実際に動かしながら学べます。
対象読者
- HTMLの基本が分かる方
- サイトに簡単なアニメーションを加えたい方
- 開発環境を増やさずに試したいデザイナーや制作者
この文書で学べること
- CDNを使ったGSAPの読み込み方法
- プレーンHTMLでの導入手順と注意点
- WordPressなど主要環境での読み込み方法の考え方
- 基本的なアニメーションの書き方と応用のヒント
前提知識
HTMLの基本タグ（head、body）やJavaScriptの基本的な読み込み方法が分かれば、十分に理解できます。
GSAPとCDNとは？まずは基本を整理
はじめに
GSAPはJavaScriptでスムーズなアニメーションを作るためのライブラリです。直感的なAPIとタイムライン機能で、複雑な動きも管理しやすくなります。例えば、箱要素を右に移動させつつフェードインする、といった処理を短いコードで書けます。
GSAPとは？
GSAPはアニメーションの時間管理（イージングや遅延、シーケンス）を得意とします。細かい制御が必要な場面や、パフォーマンスを重視する制作に向きます。専門用語を使わずに言えば「細かい動きを簡単に作れる道具」です。
CDNとは？
CDNは世界中に分散したサーバーからファイルを配信します。利用者に近いサーバーから読み込むため、表示が速くなります。静的ファイル（JavaScriptやCSS）を素早く配る仕組みです。
GSAPをCDNで使うメリット
- ローカルにファイルを置く必要がなく、すぐ試せます。
- 更新やバージョン切替が簡単です。
- 世界中の利用者に対して読み込みが安定します。
注意点
- バージョンを固定しないと意図しない更新で動かなくなることがあります。
- ネットワーク障害時は読み込めないのでフォールバックを用意すると安心です。
- サイトのセキュリティポリシー（CSP）に合わせて設定が必要です。
よく使うCDN例（例示）
- cdnjs
- jsDelivr
- unpkg
簡単な導入は次章で実例を示します。
プレーンHTMLでGSAP CDNを読み込む基本手順
概要
最もシンプルな導入方法は、HTMLにCDNのタグを追加することです。代表的なCDNはcdnjsやjsDelivrです。読み込み後はgsap.to()やgsap.from()でアニメーションを書けます。
手順（簡潔）
- CDNのURLを取得する（例：cdnjs, jsDelivr）。
- HTMLのか直前にタグを追加する。
- スクリプトの後に自分のスクリプトを書くか、DOMContentLoadedで処理を始める。
具体例
に入れる例：
直前に置く例（推奨）：
// DOMが読まれた後にアニメーション
gsap.to(‘#box’, { x: 100, duration: 1 });
読み込みタイミングと注意点
- 基本は直前に置くとDOM操作で待つ必要が少なくなります。
- プラグインを使う場合は、プラグインのスクリプトをGSAP本体の後に並べます。
- オフラインや厳密なバージョン管理が必要なら、ファイルをローカルに保存して読み込んでください。
CDNで読み込んだGSAPでアニメーションを書く基本パターン
はじめに
CDNでGSAPを読み込んだ後、実際にアニメーションを書くときの基本パターンを丁寧に紹介します。ここではDOMの読み込み完了後に実行する方法、gsap.from()でのフェードイン、gsap.timeline()での時系列管理、複数要素の一括アニメーション（stagger）の具体例を示します。
DOMの読み込みを待つ
HTMLに直接scriptを置く場合、DOMContentLoadedイベントかscriptにdeferを使ってからGSAPを呼び出します。例：
<script>
window.addEventListener('DOMContentLoaded', function() {
// ここでgsapを使う
});
</script>
deferを使えばスクリプトがDOM構築後に実行されるため、イベントリスナーは不要です。
単純なフェードイン（gsap.from）
特定の要素を下からゆっくりフェードインさせる基本例です。
gsap.from('.box', {
duration: 0.8,
y: 20,
opacity: 0,
ease: 'power2.out'
});
この書き方は、要素の初期状態（透明で少し下にある）から自然に表示させたいときに便利です。
複数要素の順番付きフェード（stagger）
同じクラスが複数あるとき、staggerで順に動かせます。
gsap.from('.item', {
duration: 0.6,
y: 10,
opacity: 0,
stagger: 0.12
});
要素が連続して現れる動きを簡単に作れます。
時系列で整理する（gsap.timeline）
複数のアニメーションを時間軸で管理すると、複雑なシーケンスを読みやすく保てます。
const tl = gsap.timeline({defaults:{duration:0.6, ease:'power2.out'}});
tl.from('.logo', {y:-20, opacity:0})
.from('.nav li', {y:10, opacity:0, stagger:0.08}, '-=0.3')
.from('.hero-title', {y:20, opacity:0});
この例では、ロゴ→ナビ→見出しの順に自然なつながりでアニメーションします。オプションのオフセット（’-=0.3’）で重ねも調整できます。
小さなコツ
- 同じ設定はtimelineのdefaultsに入れると簡潔になります。
- 複数要素はgsap.utils.toArrayで扱うと柔軟です。
- 開発時はdurationやeaseを調整して動きの印象を確かめてください。
以上が、CDNで読み込んだGSAPを使う際の代表的なパターンです。実際に手を動かして試すと理解が深まります。
WordPressでGSAPをCDNから読み込む方法（functions.php & 直書き）
概要
WordPressでは主に2通りの導入方法があります。1つはfunctions.phpでwp_enqueue_script()を使ってCDN版GSAPを登録し、自作スクリプトを依存関係として読み込む方法。もう1つはheader.phpに直接タグを貼る方法です。enqueue方式はテーマ更新時の上書きリスクが少なく、安全に運用できます。
1. functions.phpで読み込む（推奨）
手順は簡単です。GSAPを登録してから、自作スクリプトを依存関係に設定します。例：
function theme_enqueue_gsap() {
wp_register_script('gsap', 'https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js', array(), null, true);
wp_enqueue_script('gsap');
wp_enqueue_script('theme-gsap', get_stylesheet_directory_uri() . '/js/theme-gsap.js', array('gsap'), null, true);
}
add_action('wp_enqueue_scripts', 'theme_enqueue_gsap');
ポイント：get_stylesheet_directory_uri()は子テーマ対応、配列で依存関係を渡すとGSAPが先に読み込まれます。in_footer=trueにするとページ下部に出力され、表示速度に良い影響があります。
運用上の注意：テーマを更新するとfunctions.phpが上書きされる場合があります。安全に運用するには子テーマかスニペットプラグインを使うと良いです。
2. header.phpに直書き（簡易）
すぐ試したいときはheadまたはbody開始直後に直接書きます。例：
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
<script>
gsap.to('.box', { x: 100, duration: 1 });
</script>
この方法は手軽ですが、テーマ更新で上書きされるリスクやスクリプトの読み込み順を管理しにくい点があります。短いテストや検証向けです。
確認方法
ブラウザの開発者ツールでNetworkやConsoleを確認し、GSAPが読み込まれ正しく実行されているかを確認してください。
