【GSAP ScrollTrigger】スクロールに合わせて要素をフェードイン表示する方法

本記事ではGSAPのScrollTriggerを使って、スクロールに合わせて要素をフェードイン表示する方法を解説します！

GSAPのおさらい！！！

完成系はこちら

【余談】ScrollTriggerについて

ScrollTriggerは、GSAPのプラグインです。スクロールによるアニメーションの指定を簡単に設定できます。

ScrollTriggerの使用方法

CDNまたはnpmでインストールします。

CDN

下記コードをタグ内かbody直下に貼り付けてください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

npｍ

下記コマンドをプロジェクトのルートディレクトリで実行します。

npm install gsap

JSファイル内でimportします。

import gsap from 'gsap';
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

スクロールに合わせて要素をフェードインさせる

では、やっていこ！！！

HTMLとCSS

HTMLとCSSのサンプル文は下記。今回はboxというクラスをフェードインで表示します。

HTML

<div class="space">Scroll Down</div>
<section class="content">
  <div class="box">
    box
  </div>
</section>
<div style="height: 800px;"></div> <!-- 高さ持たせる為の要素-->

CSS

CSSも基本的にレイアウトのためのCSSなのでご自身の環境に合わせて変更してください。

    * {
      margin: 0;
      padding: 0;
    }
    .space {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50vw;
      color: #fff;
      background: #333;
    }
    .box {
      width: 100px;
      height: 100px;
      background: #f00;
    }
    .content {
      padding: 80px 40px;
    }

Javascript

肝になるJavascriptについて解説します。まずは全文をどうぞ。

gsap.fromTo('.box',
  {
    autoAlpha: 0, // 要素を隠す
    y: 20 // 縦方向に+20px
  },
  {
    autoAlpha: 1, // 要素を表示
    duration: 1, // 1秒かけてアニメーション
    y: 0, // 縦方向0に
    scrollTrigger: { // scrollTriggerの設定
      trigger: '.box', // ターゲットとなる要素を指定
      start: 'top center', // アニメーションの開始位置を設定。
      // markers: true, 
    }
  });

それぞれ解説します！

gsap.fromTo()

gsap.fromTo()はアニメーションの開始値と終了値を指定できるメソッドです。構文は下記

gsap.fromTo( '要素',{要素の開始値},{要素の終了値} );

scrollTriggerの設定値について

scrollTrigger: { // scrollTriggerの設定
  trigger: '.box', // ターゲットとなる要素を指定
    start: 'top center', // アニメーションの開始位置を設定。
  // markers: true, 
}

triggerプロパティはスクロールトリガーが発火する起点となる要素を指定します。一方でstartプロパティはアニメーションの開始位置を指定するものです。

startプロパティは2つの値を指定しています。この設定値は以下の意味です。

• top（1つ目の値）→　triggerで指定した要素の位置（topなら頭）

• center（2つ目の値）→　ウィンドウの位置

これは実際に例で見たほうがわかりやすい

上記の例では、右端にscroller-startとstartの線があります。このscroller-startとstartが重なったタイミングでアニメーションが発火します。

と、こんな感じでアニメーションの開始位置を決めるのがstartプロパティでした！

ちなみに今回は指定していませんが、endプロパティではアニメーションの終了位置を決められます。

まとめ

というわけで、ScrollTriggerでスクロール時に要素をフェードインで表示させる方法でした！！

参考になれば嬉しいですっ