MENU

アニメーション用のライブラリGSAP 3のインストール方法

もくじ

はじめに

GSAP 2(TweenMax/TweenLite/TimelineMax/TimelineLite)がGSAP 3(gsap)になって久しいですが、最近になって使う事が多くなってきたのでインストール方法をまとめます。

GSAP 3 とは

Webアニメーション用のJavaScriptライブラリです。
前バージョンのGSAP 2の半分くらいのファイルサイズになって、APIがTweenMax/TweenLite/TimelineMax/TimelineLiteと4つ有ったものが、gsap一つにまとまってより使いやすくなっています。

現代のウェブアニメーションのスタンダード
開発者をアニメーションのスーパーヒーローにする、堅牢なJavaScriptツールセットです。私たちは、パフォーマンス、互換性、サポートにこだわっているので、お客様はその必要はありません。

公式サイトより https://greensock.com/

インストール方法

詳しいインストール方法は公式の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を発見したときには感動しました。(トップページにあれば・・・)

よかったらシェアしてください!
もくじ
閉じる