ISSEN 
はじめに
この記事の概要
こんにちは、株式会社TOKOSエンジニアのスギタです！
今回は、GreenSock社が開発したGreenSock Animation Platform(GSAP)のScrollTrigerを使いスクロールアニメーションを行ってみようと思います。
スクロールするとふわっと浮き出てくるアニメーションの実装を行っていきたいと思います。
前回の記事 参考 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>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と同じ会社が開発したことも有り、応用がききやすくまた簡単に実装ができるため重宝しております。
また、ScrollTriggerの繰り返し処理をする方法の記事も書きましたので、合わせて読んでいただけると幸いです！
【ScrollTrigger】forEach文を使用した繰り返し処理とスクロール量に合わせたアニメーション
