HighLab

scrollmagic + gsapアニメーションの使い方

  • 公開日：
  • 更新日：
  • 文字数：6241文字

読み込み

<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);

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

以外にややこしい

参考

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

目次

Category