scrollmagic + gsapアニメーションの使い方
読み込み
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
基本的な書き方
gsap.fromTo(
".ani-fade", // アニメーションさせる要素
{
y: 100, // アニメーション開始前の縦位置(下に100px)
autoAlpha: 0, // アニメーション開始前は透明
},
{
y: 0, // アニメーション後の縦位置(上に100px)
autoAlpha: 1, // アニメーション後に出現(透過率0)
scrollTrigger: {
trigger: ".ani-fade", // アニメーションが始まるトリガーとなる要素
//toggleActions: "play none none reverse", // 上スクロールで戻る
start: "top center", // アニメーションの開始位置
markers: true, // マーカー表示
},
}
);
classをtoggleする方法
// 各要素に対してアニメーションを適用
elements_check.forEach(element => {
gsap.fromTo(
element, // アニメーションさせる要素
{},
{
scrollTrigger: {
trigger: element, // アニメーションが始まるトリガーとなる要素
toggleActions: "play none none reverse", // 上スクロールで戻る
start: "top top+=80%", // アニメーションの開始位置
markers: true, // マーカー表示
//once: true, // 一度だけ発火
//class追加
toggleClass: "title-ani-active",
},
}
);
});
クラス名「ani-fade」に対して
・初期値をtop:100px,opacity:0%に設定
・発火位置をstartで示している
'start: "top center", // アニメーションの開始位置
最初のtopは.ani-fadeの位置を示している。
最後のcenterは画面の位置を示している。
今回だとtiggerで設定した.ani-fadeの要素の最初と画面の中央が重なった時に、発火される。
一度だけ発火させたい場合
scrollTrigger: {
trigger: ".ani-fade", // アニメーションが始まるトリガーとなる要素
toggleActions: "play none none reverse", // 上スクロールで戻る
start: "top center", // アニメーションの開始位置
markers: true, // マーカー表示
once: true // 一度だけ発火
},
once: trueを追加させてあげる
classがページ内に複数ある場合
// すべての ".ani-fade" 要素を取得
const elements = document.querySelectorAll(".ani-fade");
// 各要素に対してアニメーションを適用
elements.forEach(element => {
gsap.fromTo(
element, // アニメーションさせる要素
{
y: 40, // アニメーション開始前の縦位置(下に100px)
autoAlpha: 0, // アニメーション開始前は透明
},
{
y: 0, // アニメーション後の縦位置(上に100px)
autoAlpha: 1, // アニメーション後に出現(透過率0)
scrollTrigger: {
trigger: element, // アニメーションが始まるトリガーとなる要素
toggleActions: "play none none reverse", // 上スクロールで戻る
start: "top-=100 center", // アニメーションの開始位置
markers: true, // マーカー表示
once: true // 一度だけ発火
},
}
);
});
横に並んだ要素が順番に下からフェードイン
gsap.fromTo(
".delay_ani", // アニメーションさせる要素
{
y: 20, // アニメーション開始前の縦位置(下に100px)
autoAlpha: 0, // アニメーション開始前は透明
},
{
y: 0, // アニメーション後の縦位置(上に100px)
autoAlpha: 1, // アニメーション後に出現(透過率0)
stagger: 0.2, // 0.2秒遅れて順番に再生
scrollTrigger: {
trigger: ".delay_ani", // アニメーションが始まるトリガーとなる要素
toggleActions: "play none none reverse", // 上スクロールで戻る
start: "top center", // アニメーションの開始位置
markers: true, // マーカー表示
},
}
);
読み込みが終わった後にアニメーション実行したいので$(function () {})をつける
$(function () {
// すべての ".ani-fade" 要素を取得
const elements = document.querySelectorAll(".ani-fade");
// 各要素に対してアニメーションを適用
elements.forEach(element => {
gsap.fromTo(
element, // アニメーションさせる要素
{
y: 20, // アニメーション開始前の縦位置(下に100px)
autoAlpha: 0, // アニメーション開始前は透明
},
{
y: 0, // アニメーション後の縦位置(上に100px)
autoAlpha: 1, // アニメーション後に出現(透過率0)
duration: .5, // アニメーションの所要時間（秒）を設定
scrollTrigger: {
trigger: element, // アニメーションが始まるトリガーとなる要素
//toggleActions: "play none none reverse", // 上スクロールで戻る
start: "top-=100 center", // アニメーションの開始位置
markers: false, // マーカー表示
once: true // 一度だけ発火
},
}
);
});
gsap.fromTo(
".delay_ani", // アニメーションさせる要素
{
autoAlpha: 0, // アニメーション開始前は透明
},
{
autoAlpha: 1, // アニメーション後に出現(透過率0)
stagger: 0.2, // 0.2秒遅れて順番に再生
scrollTrigger: {
trigger: ".delay_ani", // アニメーションが始まるトリガーとなる要素
//toggleActions: "play none none reverse", // 上スクロールで戻る
start: "top center", // アニメーションの開始位置
markers: false, // マーカー表示
},
}
);
})
環境構築
インストール
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);
これでなんとか設定していけました。
以外にややこしい
参考