ScrollMagicをES6で使用する方法・webpack (laravelmix) での使い方メモ

はる

普段、フロントエンドのローカル開発環境LaravelMixを使用していて、JavaScriptはBabelを通して記述しています。
その際にScrollMagicを使った時、つまづいたのでメモメモ

各種モジュールをインストール

npm または yarnでScrollMagicを使うためのモジュールをインストールします。

yarnの場合

yarn add scrollmagic
yarn add gsap
yarn add scrollmagic-plugin-gsap

JavaScriptファイルのインポート方法

import * as ScrollMagic from 'scrollmagic';
import gsap from "gsap";

import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";
ScrollMagicPluginGsap(ScrollMagic, gsap);

• ES6では互換性がないのでscrollmagic-plugin-gsapを使用する
• scrollmagic-plugin-gsap は webpack4以降の場合使用する
• webpack4以上での使い方です。