【備忘録】CustomEase付きのgsapをnpmでインストールして使う

1 min読了の目安(約700字TECH技術記事

npmのgsapにはCustomEaseの型定義はあるものの、実態は含まれておらずgsapのサイトでアカウントを作らないと使うことができないという仕様になっている。

そのため、基本的にはgsapをダウンロードしてきてローカルパッケージとしてnpm/yarnでインストールするのが良い。

  1. gsapのアカウントを作る
  2. ログインした状態でgsapを下のサイトからzipでダウンロードする
    https://greensock.com/docs/v3/Installation
  3. zipを解凍すると以下のように展開されるので, npm-install-this/gsap-bonus.tgzをさらに解凍する
  4. するとpackageなるフォルダが作られるのでこれをプロジェクトのディレクトリの中など好きなところにおく
  5. npm install --save /path/to/packageまたはyarn add /path/to/packageでローカルパッケージとしてインストールする
  6. 使いたいところでインポートする
import { gsap } from "gsap";
import { CustomEase } from "gsap/CustomEase";
// ...

こうすることでTypeScriptの型つきでCustomEaseを使用することができる。