はじめに
GSAP 2（TweenMax/TweenLite/TimelineMax/TimelineLite）がGSAP 3（gsap）になって久しいですが、最近になって使う事が多くなってきたのでインストール方法をまとめます。
GSAP 3 とは
Webアニメーション用のJavaScriptライブラリです。
前バージョンのGSAP 2の半分くらいのファイルサイズになって、APIがTweenMax/TweenLite/TimelineMax/TimelineLiteと4つ有ったものが、gsap一つにまとまってより使いやすくなっています。
現代のウェブアニメーションのスタンダード
公式サイトより https://greensock.com/
開発者をアニメーションのスーパーヒーローにする、堅牢なJavaScriptツールセットです。私たちは、パフォーマンス、互換性、サポートにこだわっているので、お客様はその必要はありません。
インストール方法
詳しいインストール方法は公式のGSAP Installationページにまとまっていますが、英語なので簡単にご紹介します。
インストールは下記方法に対応しています。
- ダウンロード
- zipファイルをダウンロードして、scriptタグで並べる従来の方法
- CDN
- ※有料会員向けのプラグインはダウンロードが必要
- npm
- npm install gsap または yarn add gsap で追加した後、Install Helperで表示されるコードをコピペ
- ※有料会員（Club GreenSock）向けのプラグインを利用する場合はダウンロードしたファイル、または発行されるトークンを利用したプライベートレジストリからのインストールが必要
参考：公式動画 Using GreenSock’s Private NPM Registry
プラグインのインストール：GSAP 3 Install Helper
CDNやnpmで利用する場合、特にプラグインのインストールで迷うと思いますが、
公式でインストールヘルパーを用意してくれています。
GSAP Installationページの中盤にひっそり存在してます。
タブでCDNかNPMかを選んで、使いたいプラグインにチェックを入れます。
すると、下部のコードが更新されてコピペ出来ます。
UMD/CommonJSの場合は、require文に書き換えるオプションも表示されます。
おわりに
簡単ですが、GSAP 3のインストール方法でした。
npmで落としてきたものの、import文の書き方やプラグインのインストール方法が分からずに右往左往したので
公式でInstall Helperを発見したときには感動しました。（トップページにあれば･･･）
