ES Modules対応のgsapの使い方

ウェブのトゥイーンエンジンの老舗「GSAP（グリーン・ソック・アニメーション・プラットフォーム）」（旧 TweenMax）のnpmでの使い方をまとめる。

※本記事ではNode.js v14以上を開発環境に利用しているものとして、webpackでの利用方法を解説する。webpackの導入方法については記事「最新版で学ぶwebpack入門 - JavaScriptのモジュールバンドラ - ICS MEDIA」を参照のこと。

Babelでの使い方

次のコマンドを入力してgsapモジュールをインストールする。

npm i gsap

詳しくはサンプルを参照。

Babel + webpackのサンプル

TypeScriptでの使い方

次のコマンドを入力してgsapモジュールをインストールする。
型定義ファイルはgsapモジュールに含まれているので、別途インストールする必要はない。

npm i gsap

TypeScriptでは以下のように設定ファイルを用意した。

tsconfig.js

{
  "compilerOptions": {
    // TSはECMAScript 5に変換
    "target": "es5",
    // TSのモジュールはES Modulesとして出力
    "module": "es2015",
    "moduleResolution": "node"
  }
}

webpack.config.js

module.exports = {
  // モード値を production に設定すると最適化された状態で、
  // development に設定するとソースマップ有効でJSファイルが出力される
  mode: 'production',

  module: {
    rules: [
      {
        // 拡張子 .ts の場合
        test: /\.ts$/,
        // TypeScript をコンパイルする
        use: 'ts-loader'
      }
    ]
  },
  // import 文で .ts ファイルを解決するため
  resolve: {
    extensions: [
      '.ts', '.js'
    ]
  }
};

詳しくはサンプルを参照。

TypeScript + webpackのサンプル

import 文の書き方

import { gsap } from 'gsap';

といった感じでgsapから使いたいモジュールを読み込む。

イージングもgsapモジュールから読み込むことができる。GSAP 3では文字列でイージングを指定できるようになったが、importするのが好きな人は文字列でなくても大丈夫だ。

import { gsap, Bounce } from 'gsap';

おまけ

次の記事の作例をgsap v3にマイグレーションした。

高機能なモーション制作用JSライブラリGSAPを使ったタイムリマップ表現 - ICS MEDIA