search
LoginSignup
38

More than 1 year has passed since last update.

posted at

updated at

Organization

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
38