scrollMagicを利用してアニメーション

scrollMagicを利用してアニメーションさせたけど、
CDNとかじゃなくてyarnでインストールしてimportした故にちょっとめんどくさかった話です。

TweenMaxとscrollMagicを組み合わせて、指定した要素をアニメーションさせたい。

jsはwebpackでバンドルしているので、importする。
yarnを利用してscrollmagicを追加。

yarn add scrollmagic
yarn add gsap //これはTweenMax

scrollMagicを使いたい所に以下のように記述。
ついでにTweenMaxも入れておく。

import scrollMagic from 'scrollmagic'
import {TweenMax} from 'gsap'

const controller = new ScrollMagic.Controller()
new ScrollMagic.Scene({
      triggerElement: tigger,
      triggerHook: hook
    })
     .setTween(TweenMax.from(
	// ～ここにアニメーション～
     ))
     .addTo(controller)

という風にしたがエラーが出た。

scrollMagicのissueなどを見て、その中にあるanimation.gsap.jsを使ってみたり（失敗）imports-loader入れてみたり（失敗）…
解決には至らずだった。

なんとか解決（？）

他色々と記事を読んでいくうちに、最終的には↓で動くようになった。

yarn add scrollmagic-plugin-gsap

import * as ScrollMagic from 'scrollmagic'
import { ScrollMagicPluginGsap } from 'scrollmagic-plugin-gsap'
import {TweenMax} from 'gsap'

ScrollMagicPluginGsap(ScrollMagic, TweenMax)

const controller = new ScrollMagic.Controller()
new ScrollMagic.Scene({
      triggerElement: tigger,
      triggerHook: hook
    })
     .setTween(TweenMax.from(
	// ～ここにアニメーション～
     ))
     .addTo(controller)

scrollMagicとTweenMaxを使ってアニメーションをしたいとき、
もしかするとまた引っ掛かるかもしれないので覚えメモ

---

★補足

scrollMagicの中にあるanimation.gsap.jsプラグインはES6モジュールとの互換性がないために、問題が結構発生しているらしい。
（参考元）
・scrollmagic-plugin-gsap
https://www.npmjs.com/package/scrollmagic-plugin-gsap

・scrollMagicのissue内
https://github.com/janpaepke/ScrollMagic/issues/842#issuecomment-573303518