環境構築

インストール

npm install scrollmagic

npm install gsap -s

インポート

import {TweenMax} from "gsap";

TweenMax.to();

Scroll Magic

const controller = new ScrollMagic.Controller();

triggerHook: "onEnter", "onLeave",デフォルトは"onCenter"

Sceneの中に記述(triggerElementと同じオブジェクト内)

(例) triggerHook:'onEnter',

---

reverse:false,true

スクロールを戻した時にアニメーションの逆再生を行うか

---

 

 

 

gsapの設定

var speed = 1;
var tween = TweenMax.to('#bgcolor', speed, {
backgroundColor: '#4caf50'
})

magic scrollのつなげ込み

.setTween(tween)

---

setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js

 

上記のようなエラーがでます。

 

---

そこでplugins/animation.gsap.jsを読み込む必要がありますが、webpackで使用する際に一つプラグインをインストールする必要があります。

 

npm install --save-dev imports-loader

インストール後インポートしてあげます。

import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';

参考

https://qiita.com/tmw/items/b0df1a16cccc927d7a26

webpack2系はこれでいけるかんじなんですが、webpack4系でやってたらどうしてもエラーがでてしまいましたので、

調べてみた結果

---

scrollmagic-plugin-gsapを使います。

npm install --save scrollmagic-plugin-gsap

webpack v4系

scrollmagic 2.0.5

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

これでなんとか設定していけました。

以外にややこしい

参考

https://www.npmjs.com/package/scrollmagic-plugin-gsap