vue/nuxt/typescriptでtweenmaxを使う

はじめに

アニメーションを描こうと思った際に使おうと思ったら色々と情報が少なく調べるのが大変だったのでメモがてら

導入

今回nuxtを使っていたのでnuxtでやりますがvueも大して変わらないと思います。
nuxt、typescriptの環境は整っている前提で進めます

"nuxt": "^2.0.0",
"@nuxt/types": "^0.7.7",
"vue-property-decorator": "^8.4.2"

まずは使いたいプロジェクトファイルで

npm install --save gsap

します。
私の時は"gsap": "^3.3.4"でした。

@types/gsapというモジュールがありますがv3になって必要なくなったそうです、むしろ衝突するからいれるなとのこと
このページに書いてありました

次にtsconfig.jsonに

{
  "compilerOptions": {
    ...
  },
  "files": [
    "node_modules/gsap/types/index.d.ts"
  ]
}

を追記します。おそらくなくても大丈夫ですが、typescriptエラーが出る場合があるようです。
このページの一番下に書いてあります。

この時点で

example.vue

<template>
   <p class="hello">おはようございます</p>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { gsap } from 'gsap';
@Component
export default class Example extends Vue {
  mounted() {
    gsap.to(".hello", { x: 100, duration: 300ms })
  }
}
</script>

みたいな感じでかけば動くと思います。
後はドキュメントに乗ってるのでそれを参考に書いてください
ドキュメントはこちら

最後に

初期描画時の処理はmountedとかで描けばできるのですが、scroll時の処理がうまくできないので色々調べて頑張ってみたいと思います、やり方知っている方おられればコメント欄とかで教えていただけると嬉しいです。