GSAP初級編 | ScrollTrigger.jsでスクロールアニメーションを簡単実装

「簡単」「軽い」と巷で評判の良いGSAP（ジーサップ）、まだトライしたことがなかったので使い方を自分用にやさしくまとめてみます。

今回は初級編として、GSAPのScrollTrigger.jsを使い初歩的なスクロールアニメーションを実装してみます。
スクロールアニメーションだけならGSAPではない他の方法でもいいのですが、触りながら徐々にレベルアップしていこうという寸法です。

正直、GSAPについての解説ブログは質の高いものが山ほどあるのですが、自分で記事としてまとめることで自分が理解できてること、できてないことも洗い出せるし、内容を自分用に特化できるので記事にします。

セッティング

Docs

ダウンロードする方は上記公式サイトよりダウンロード&解凍し、gsap.min.jsScrollTrigger.min.jsを任意の場所に格納後、HTMLにscriptタグで読み込んでください。
さくっとCDNで読み込みたい場合は、

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

実装してみよう

ベーシックな例

.box01をx軸に移動

.box01をアニメーションさせたいとします。
親要素の.container-aをトリガーの要素として、ブラウザ中央に.container-aの頭が来たらアニメーションを発火させます。

gsap.to('.box01', { //アニメーションさせたい要素
  x: 400, //x軸方向に400px移動
  scrollTrigger: {
    trigger: '.container-a',//アニメーションを発火させるトリガーとなる要素
    start: 'top center', //アニメーションが開始する位置を指定
    markers: true, //マーカーを表示
  }
});

to()でまずアニメーションさせたい要素を指定し、どう変化させたいか記述し、scrollTriggerで各種設定をする形です。
今回の例では、アニメーションさせたい要素とトリガーとなる要素を別に指定していますが、普通に同じ要素を指定するパターンが多いと思います。

scrollTrigger内のstart: 'top center'について詳しくは後述しますが、

前側がトリガーとなる要素の発火位置
後側がブラウザの基準位置

です。つまり、「ブラウザの中央位置にトリガーとなる要素の頭が来たら」発火するということです。
（デフォルト値ではstart: 'top bottom'で、「ブラウザの下部にトリガーとなる要素の頭が来たら」なので、表示されたら即発火します）
言葉で書くとややこしいのですが、markers: trueでマーカーを表示できて分かりやすいです。

以下のデモページでは、

x軸への移動
y軸への移動・背景色の変化
回転・スケールの変化
シアー・デュレーション
スクロールに合わせた変化
不透明・ディレイ
複数要素をタイミングをズラして変化
class付加
親要素の背景色の変化
要素のpin止め（position:fixed;）
toggleActionsでアニメーションの制御

と複数の例を掲載しています。
なお、マーカーをごちゃつかせたくないので、start: 'top center'で統一しました。

ScrollTrigger.jsのデモページ

指定の記述を学ぶ

transformを指定する

GSAPでは、CSSのtransformプロパティに該当する内容をアニメーションとして指定することができます。

GSAPでの記述	CSSではこう記述	説明
x: 100	translateX(100px)	x軸（水平）方向への移動
y: 100	translateY(100px)	y軸（垂直）方向への移動
scale:2	scale(2, 2)	スケールが２倍になる
scaleX: 2	scaleX(2)	x軸方向だけスケールが2倍
scaleY: 2	scaleY(2)	y軸方向だけスケールが2倍
rotation: -45	rotate(-45deg)	-45度回転
rotationX: 360	rotateX(360deg)	x軸を中心にパタンと回転
rotationY: 360	rotateY(360deg)	y軸を中心にパタンと回転
skewX: “30deg”	skewX(30deg)	x軸方向にシアー30度
skewY: “30deg”	skewY(30deg)	y軸方向にシアー30度
xPercent: -50	translateX(-50%)	x軸方向に要素の幅の-50%分移動
yPercent: -50	translateY(-50%)	y軸方向に要素の高さの-50%分移動
transformOrigin: “left top”	transform-origin: top left	要素の左上を中心に変形する。デフォルトは”50% 50%”

3D関係のCSSは割愛します。

transform以外の指定

transform以外の指定もできるものがあります。ここはまだまとめ中です。

autoAlpha: 0, //0でopacity: 0;とvisibility： hidden;が付加。
autoAlpha: 1, //opacity: 1;とvisibility： visibile;が付加
backgroundColor: "black", //背景色を黒にする

scrollTriggerの各種プロパティ

Timelineの指定やトリガーの設定など、ここでは代表的なものだけピックアップします。

プロパティ名	デフォルト値	説明
trigger: ‘.selecter’	–	アニメーションを発火させるトリガーとなる要素を指定
duration: 2	1	2秒かけてアニメーションさせる
delay: 2	0	2秒待ってからアニメーションを開始
pin: true	false	position:fixed;を付加
ease: Power4.out	power2.inOut	デフォルトより強めのイージング
start: ‘top center’	top bottom	アニメーションが開始する位置を指定
end: ‘bottom top’	bottom top	アニメーションが終了する位置を指定
markers: true	false	startとendで指定した位置がマーカーで画面表示
scrub: true	false	アニメーションをスクロールに連動させる
stagger{from: “start”, amount: 0.5}	–	複数の要素を同時ではなくズラして連続アニメーションさせたい場合に設定。1個目から0.5秒ずつズラしてアニメーション
toggleClass: {targets: “.container-h”, className: “shadow-lg”}	–	JSでいうtoggleClass。指定対象に指定classを付加
toggleActions: “play pause resume reset”	play none none none	onEnter、onLeave、onEnterBack、onLeaveBack、それぞれのトグル位置でアニメーションを制御