見出し画像

【 スクロールに応じたアニメーション 】 ScrollMagic × GSAP　FIREへの旅路 ♯435

S.A.P.Studio

AppleのWEBサイトで見られるような、
スクロールに応じて、画像が動くような機能を実装したくて、
色々と試しながらやってみました。


【 作るもの 】

これを作ります！

スクロールすると、
「Welcome」というタイトル部分で、画面が固定

さらにスクロール量に応じて、
「ようこそ・・・」のテキストが、下から上へ移動

さらにスクロール量に応じて、
人物が歩いている画像が、画面左から、右へ移動


【 CDN 読み込み 】

動きつけるために、JavaScriptのライブラリを使います。

読み込むためのCDNです。

<!--GSAP-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js" integrity="sha512-VEBjfxWUOyzl0bAwh4gdLEaQyDYPvLrZql3pw1ifgb6fhEvZl9iDDehwHZ+dsMzA0Jfww8Xt7COSZuJ/slxc4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  
<!--scrollTrigger-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/ScrollTrigger.min.js"></script>
  
<!-- jQuery -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  
<!-- ScrollMagic本体 -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
  
<!-- ScrollMagicのデバッグインジケータプラグイン -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
  
<!-- ScrollMagicのTweenMaxプラグイン -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>

ひとつづつ見ていきます。

▶︎   jQuery

ScrollMagicを動かすために必要です。

<!-- jQuery -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



▶︎  ScrollMagic

スクロールに応じて、要素を制御することができます。

<!-- ScrollMagic本体 -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
  
<!-- ScrollMagicのデバッグインジケータプラグイン -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
  
<!-- ScrollMagicのTweenMaxプラグイン -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>

今回は、「ScrollMagic」で、「TweenMax」を使うので、そのためのCDNも必要です。


▶︎ TweenMax

アニメーションの制御するライブラリです。

「TweenMax」と「GSAP」は同じJSライブラリです。
統合されました。



▶︎ GSAP

GSAP（GreenSock Animation Platform）
アニメーションを実装するためのライブラリです。
こちらをCDNで読み込みます。

今回は、GSAPのscrollTriggerというライブラリも使用しますので、こちらも一緒に読み込みます。

<!--GSAP-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js" integrity="sha512-VEBjfxWUOyzl0bAwh4gdLEaQyDYPvLrZql3pw1ifgb6fhEvZl9iDDehwHZ+dsMzA0Jfww8Xt7COSZuJ/slxc4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  
<!--scrollTrigger-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/ScrollTrigger.min.js"></script>


▶︎ scrollTrigger

アニメーションを発火させるタイミングの調整などを行うライブラリです。
GSAPの初期設定にはないため、別でCDNを読み込みます。




【 コード 】

HTML
SCSS
JavaScript
のコードを解説します。

◆ HTML

<div class="greeting">
  <div class="greeting-container wrapper">

    <h1 class="scrollReveal title">Welcome</h1>
    <div class="under-line"></div>

    <div class="greeting-container-inner">

      <div class="greeting-container-inner-bg">

      </div>

      <div class="greeting-container-inner-bg-text">
        <p>ようこそS.A.P.Studioへ</p>
        <p>あなたが進むその先へ</p>
        <p>WEBデザインの力を</p>
      </div>

    </div>

  </div>
</div>


◆ SCSS

.greeting {
  width: 100%;
  background-color: #000;

  &-container {
    width: 100%;
    padding: 10% 0;
    margin: 0 auto;

    h1 {
      width: 100%;
      color: white;
      text-align: center;
      font-size: 3rem;
     }

     .under-line {
        width: 114px;
        height: 3px;
        margin: 0 auto;
        background-color: blue;
      }

    &-inner {
      width: 100%;
      height: 100vh;
      margin: 0 auto;
      position: relative;
      overflow: hidden;


      &-bg {
        width: 120%;
        height: 90vh;
        background-image: url(../images/front-page-img/3.jpg);
        background-size: cover;
        position: relative;
      }


      &-bg-text{
        width: 80%;
        margin: 0 auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba($color: #000000, $alpha: 0.8);
        opacity: 0;

        p {
          @include jap-font;
          font-size: 2.2rem;
          color: white;
          text-align: center;
          line-height: 1.5;
          padding: 3%;
        }
      }
    }
  }
}


◆ JavaScript

  var controller = new ScrollMagic.Controller();　　//　①　　ScrollMagicの設定 controllerを定義する

  var tl = new TimelineMax();　　　//　② GSAPのTimelineMaxの設定 tlを定義

  tl.fromTo(　　　　　　　//　③　TimelineMaxのアニメーションの設定
    ".greeting-container-inner-bg", {　　　　　　//　TimelineMaxのアニメーションのターゲット指定
      xPercent: -100 　//　左へ100%の位置に初期位置を指定 
    }, {
      xPercent: 0, ease: Linear.easeNone,　　　//左へ0%の位置へ移動

      scrollTrigger: { 　//　　④scrollTriggerの設定
        trigger: '.greeting-container-inner-bg',//ターゲット要素
        start: 'center center', //アニメーションが始まる位置
        end: 'bottom center', //アニメーションが終わる位置
        scrub: true, //スクロール量に合わせてアニメーション
        toggleActions: "play complete reverse reset" //逆再生あり設定
      }

    }
  );



  tl.to(　　　　　//　　⑤　TimelineMaxのアニメーションの設定　その二
    ".greeting-container-inner-bg-text", {//TimelineMaxのアニメーションのターゲット指定
      opacity: 1,
      yPercent: -260,//上へ260%の位置へ移動

      scrollTrigger: { 　　　//　　⑥ 　scrollTriggerの設定　その二
        trigger: '.greeting-container-inner-bg-text',//ターゲット要素
        start: 'center bottom', //アニメーションが始まる位置
        end: 'bottom center', //アニメーションが終わる位置
        scrub: true, //スクロール量に合わせてアニメーション
        toggleActions: "play complete reverse reset"//逆再生あり設定
      }
    });



  new ScrollMagic.Scene({ 　　　//　　⑦ 　ScrollMagicのScene設定
      triggerElement: '.greeting', //ターゲットとなる要素
      duration: "100%", // アニメーションの開始から終了までのスクロール量
      triggerHook: 'onLeave', //発火する位置
      offset: -20  //初期値を20px下げる
    })


    //　　⑧ setする
    .setPin('.greeting') //　要素を止める
    .setTween(tl) 
    .addTo(controller); //ScrollMagicのcontrollerに設定を追加する


【 コード解説 】

HTMLと、SCSSは、単純なものです。
問題は、JavaScriptです。


◆ JavaScript

コメントアウトのナンバー順に解説します。


①　ScrollMagicの設定 controllerを宣言

var controller = new ScrollMagic.Controller();

このコードは、controller という変数を宣言しています。

ScrollMagicを使う時に書くものと覚えておきましょう。



② GSAPのTimelineMaxの設定　 tlを定義

var tl = new TimelineMax();　　

このコードは、tl という変数を宣言しています。

TimelineMaxを使う時に書くものと覚えておきましょう。


③　TimelineMaxのアニメーションの設定

tl.fromTo(　　　　　　　//　③　TimelineMaxのアニメーションの設定
    ".greeting-container-inner-bg", {　　　　　　//　TimelineMaxのアニメーションのターゲット指定
      xPercent: -100 　//　左へ100%の位置に初期位置を指定 
    }, {
      xPercent: 0, ease: Linear.easeNone,　　　//左へ0%の位置へ移動

      scrollTrigger: { 　//　　④scrollTriggerの設定
        trigger: '.greeting-container-inner-bg',//ターゲット要素
        start: 'center center', //アニメーションが始まる位置
        end: 'bottom center', //アニメーションが終わる位置
        scrub: true, //スクロール量に合わせてアニメーション
        toggleActions: "play complete reverse reset" //逆再生あり設定
      }

    }
  );

ここのコードでは、人が歩いている画像を、画面の左（外）から、
中止へと移動させるアニメーションを指定しています。

②で宣言した"tl"に、"fromTo" と、続けて書きます。

これは、TimelineMaxのアニメーションの指定です。

この状態から
この状態へ変化させるという指定ができます。

tl.fromTo(　　　　　　　//　③　TimelineMaxのアニメーションの設定
    ".greeting-container-inner-bg", {　　　　　　//　TimelineMaxのアニメーションのターゲット指定
      xPercent: -100 　//　左へ100%の位置に初期位置を指定 
    }, {
      xPercent: 0, ease: Linear.easeNone,　　　//左へ0%の位置へ移動

".greeting-container-inner-bg"　という要素をターゲットに指定しています。

これに続けて、
元の状態を、{ } の中に書きます。

 xPercent: -100


さらに、変化後の内容を、次の { }　の中に、書きます。

xPercent: 0, ease: Linear.easeNone,

これで、人が歩いている画像が、
画面の左　-100%の位置から、
画面の左 　　0%の位置へ移動することを指定できました。

次は、
その移動するアニメーションの動きを制御します。
そこで使うのが、scrollTriggerです。


④　scrollTriggerの設定

scrollTrigger: { 　//　　④　　scrollTriggerの設定
        trigger: '.greeting-container-inner-bg',//ターゲット要素
        start: 'center center', //アニメーションが始まる位置
        end: 'bottom center', //アニメーションが終わる位置
        scrub: true, //スクロール量に合わせてアニメーション
        toggleActions: "play complete reverse reset" //逆再生あり設定

scrollTrigger { } の中に、書きます。

trigger　では、発火するトリガーとなる要素を指定します。
start　は、アニメーションの開始位置を指定
end　は、アニメーションの終了位置
scrub　は、スクロールに合わせてアニメーションするように指定
toggleActions　は、逆にスクロールしたときに動かすかどうかの指定

肝となるのは、scrubです。
この設定を、trueにすることで、スクロールする量と、アニメーションの量が比例して動くので、
あの楽しい感覚となります。



⑤　TimelineMaxのアニメーションの設定　その二

tl.to(　　　　　//　　⑤　TimelineMaxのアニメーションの設定　その二
    ".greeting-container-inner-bg-text", {//TimelineMaxのアニメーションのターゲット指定
      opacity: 1,
      yPercent: -260,//上へ260%の位置へ移動

      scrollTrigger: { 　　　//　　⑥ 　scrollTriggerの設定
        trigger: '.greeting-container-inner-bg-text',//ターゲット要素
        start: 'center bottom', //アニメーションが始まる位置
        end: 'bottom center', //アニメーションが終わる位置
        scrub: true, //スクロール量に合わせてアニメーション
        toggleActions: "play complete reverse reset"//逆再生あり設定
      }

④の tl.fromTo で、ターゲットにしたのは、
".greeting-container-inner-bg"　＝　人が歩いている画像でした。


⑤のターゲットは、
".greeting-container-inner-bg-text" 　＝　ようこそ・・・の部分

      <div class="greeting-container-inner-bg-text">
        <p>ようこそS.A.P.Studioへ</p>
        <p>あなたが進むその先へ</p>
        <p>WEBデザインの力を</p>
      </div>

↑ この要素をターゲットにしています。


先ほどとは違い、
fromTo　ではなく。
to
を使っています。

toは、アニメーション後の状態を書きます。

tl.to(　　　　　//　　⑤　TimelineMaxのアニメーションの設定　その二
    ".greeting-container-inner-bg-text", {//TimelineMaxのアニメーションのターゲット指定
      opacity: 1,
      yPercent: -260,//上へ260%の位置へ移動
opacity: 1,

SCSSで、opacity: 0　しているので、
これを　TimelineMaxでopacity: 1,にします。

yPercent: -260,

ようこそ・・・の部分　は、
下から上に上がってくるようにしたいので、
SCSSで指定した位置から、y軸方向に　-260%位置に移動させています。


⑥ 　scrollTriggerの設定　その二

 scrollTrigger: { 　　　//　　⑥ 　scrollTriggerの設定 その二
        trigger: '.greeting-container-inner-bg-text',//ターゲット要素
        start: 'center bottom', //アニメーションが始まる位置
        end: 'bottom center', //アニメーションが終わる位置
        scrub: true, //スクロール量に合わせてアニメーション
        toggleActions: "play complete reverse reset"//逆再生あり設定
      }

'.greeting-container-inner-bg-text'　に対しても、
scrollTriggerを設定していきます。


⑦ 　ScrollMagicのSceneの設定

new ScrollMagic.Scene({ 　　　//　　　　⑦　　ScrollMagicのScene設定
      triggerElement: '.greeting', //ターゲットとなる要素
      duration: "100%", // アニメーションの開始から終了までのスクロール量
      triggerHook: 'onLeave', //発火する位置
      offset: -20  //初期値を20px下げる
    })

こちらでは、
「Welcome」が上に画面の上に来た位置で、ScrollMagicが発火するように設定をしています。

triggerElement 　ターゲットとなる要素を指定
duration 　アニメーションの開始から終了までのスクロール量を指定
triggerHook　発火する位置を指定
offset　初期値を指定

triggerElementで、'.greeting' を指定しています。
これはココです。↓

<div class="greeting">
・
・
・
・
</div>

この範囲を、固定して、
その中身をアニメーションさせるというイメージです。

その中身は、
TimelineMaxで指定した内容です。


⑧ setする

//　　⑧ setする
    .setPin('.greeting') //　要素を止める
    .setTween(tl) 
    .addTo(controller); //ScrollMagicのcontrollerに設定を追加する

.setPin では、スクロールがその要素で止まるように設定できます。

'.greeting'　を指定しているので、
「 Welcome 」が画面の上部に来たら、スクロールを固定します。


.setTweenでは、tlを指定し、TimelineMaxを動かす処理です。
tl はこれですね。↓

var tl = new TimelineMax();　　　


.addToでは、controllerを指定します。
controller はこれですね。↓

 var controller = new ScrollMagic.Controller();　　


そして、これの動きとなります。


【 ポイント 】

JavaScriptのコードが非常にややこしいですね。

自分で、整理しながら、見ていくとそうでもないのですが、
単純にコピペするとよくわからなくなります。

今回のコードは、
要素のクラスや、CSSの指定、アニメーションの動きの指定を
カスタマイズすれば、いくらでも使い回すことができます。

つまり、
ややこしいコードも一度書いて、理解してしまえば、
カスタマイズは簡単です。


【 まとめ 】

たくさんのJavaScriptのライブラリを使用して、アニメーションの実装しました。

理解するまでは、非常にややこしく感じます。

しかし、初回登録がめんどくさいだけという感じです。

是非、理解して、実装しましょう！

アニメーションは非常におもしろいです！！

いいなと思ったら応援しよう！