scrollmagic + gsapアニメーションの使い方
- 公開日:
- 更新日:
- 文字数:1408文字
環境構築
インストール
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