【ScrollTrigger】スクロールするとふわっと浮き出るスクロールアニメーション

はじめに

この記事の概要

こんにちは、株式会社TOKOSエンジニアのスギタです!
今回は、GreenSock社が開発したGreenSock Animation Platform(GSAP)のScrollTrigerを使いスクロールアニメーションを行ってみようと思います。
スクロールするとふわっと浮き出てくるアニメーションの実装を行っていきたいと思います。

注意

GSAPの基本知識が必要なため、もしわからない方はGSAPの記事を先に読んでください

前回の記事
参考
GSAPでテキストアニメーションをしてみたISSEN

対象読者

  • WEBページにスクロールアニメーションを実装させたい方

使用方法

GSAPを利用するには、オフィシャルサイトからダウンロードするか、CDNサイトでも提供されているので、そのURLを読み込みます。
今回はCDNを利用していきたいと思います。ScrollTriggerを使用する際、GSAPに依存しているため、GSAPとScrollTrigger両方読み込まないといけません。
オフィシャルサイト
参考
GreenSockTOP

CDNを利用する場合は下記のようになります。

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

注意

GreenSock社は独自のライセンスを採用しているためご使用の際は公式ページに載っているライセンス規約を守り、ご使用してください🙇‍♂️

ScrollTrigerの実装

完成アニメーション

スクロールするとふわっと要素が出てくるような感じになります。
今回の完成は下記になります。

HTML/CSS

まずはHTML/CSSの紹介です。
今回は適当にHTML/CSSを書いてますが、コンポーネントだと思って見てください。
HTML

<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>

CSS

body {
  background-color: black;
  min-height: 100vh;
}

.top {
  width: 50%;
  height: 250px;
  background-color: red;
  margin: 500px auto 500px;
}

.middle {
  width: 50%;
  height: 250px;
  background-color: blue;
  margin: 500px auto 500px;
}

.bottom {
  width: 50%;
  height: 250px;
  background-color: green;
  margin: 500px auto 500px;
}

今回はfromToメソッドでアニメーションの指定をしていくので、初期状態はサイズと位置のみ指定しています!

では次にScrollTrigerになります

gsap.fromTo(
  ".middle", //アニメーションしたい要素
  {
    //アニメーション前の記入
    y: 20, //アニメーション開始前の位置
    autoAlpha: 0, //アニメーション開始前の状態
  },
  {
    //アニメーション後の記入
    y: 0, //アニメーション後の位置
    autoAlpha: 1, //アニメーション後の状態
    scrollTrigger: {
      trigger: ".top", //アニメーションが始まるトリガーとなる要素
      start: "bottom top", //アニメーションが始まる位置を指定
    },
  }
);

gsap.fromTo(
  ".bottom", //アニメーションしたい要素
  {
    //アニメーション前の記入
    y: 20, //アニメーション開始前の位置
    autoAlpha: 0, //アニメーション開始前の状態
  },
  {
    //アニメーション後の記入
    y: 0, //アニメーション後の位置
    autoAlpha: 1, //アニメーション後の状態
    scrollTrigger: {
      trigger: ".middle", //アニメーションが始まるトリガーとなる要素
      start: "bottom top", //アニメーションが始まる位置を指定
    },
  }
);

コードの解説に入ります。
基本的には普通のGSAPのfromToメソッドを使用して要素の位置と状態を指定して、ScrollTriggerでアニメーションの開始を指定しているような形になります。
triggerでアニメーションが始まるトリガーとなる要素を指定し、startでアニメーションが始まる位置を指定しています。
startですが、トリガーとなる要素のどの部分がブラウザのどの部分にきたらアニメーションを開始するという指定の仕方になります。
今回の場合はclass=”middle”の一番下の部分がブラウザの一番上に(ブラウザから見えなくなるとき)来たときにアニメーションを開始してくださいということになります。top center bottomで指定可能(%でも可能)になります。
またScrollTriger:{}内にmarker:true,と記入するとマーカーを表示できアニメーションが開始する位置を確認できるので調整したいときにおすすめです。

scrollTrigger: {
      trigger: ".middle", //アニメーションが始まるトリガーとなる要素
      start: "bottom top", //アニメーションが始まる位置を指定
      markers: true,//マーカーの表示
    },

マーカー表示後の画面

終わりに

今回は簡単ではありますが、ScrollTriggerを使いスクロールアニメーションを実装してみました。
GSAPと同じ会社が開発したことも有り、応用がききやすくまた簡単に実装ができるため重宝しております。