「簡単」「軽い」と巷で評判の良いGSAP(ジーサップ)、まだトライしたことがなかったので使い方を自分用にやさしくまとめてみます。
今回は初級編として、GSAPのScrollTrigger.jsを使い初歩的なスクロールアニメーションを実装してみます。
スクロールアニメーションだけならGSAPではない他の方法でもいいのですが、触りながら徐々にレベルアップしていこうという寸法です。
正直、GSAPについての解説ブログは質の高いものが山ほどあるのですが、自分で記事としてまとめることで自分が理解できてること、できてないことも洗い出せるし、内容を自分用に特化できるので記事にします。
目次
セッティング
ダウンロードする方は上記公式サイトよりダウンロード&解凍し、
gsap.min.js
ScrollTrigger.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) | スケールが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、それぞれのトグル位置でアニメーションを制御 |
start、end補足
start
およびend
で設定できる値は、
top
、center
、bottom
、left
、right
といった文字列100px
、20%
といった数値+=300
(スクロール開始位置から300px)、center+=100
(中央から100px上)といった相対値- 関数
などがあります。
toggleActions補足
使用できる文字列は、
play
(再生)pause
(一時停止)resume
(再開)reset
(リセット)restart
(初めから再生)complete
(完了)reverse
(反転して再生)none
(なし)
プロパティについて詳しく知りたい場合の参考サイト
ブラウザ幅によって適用を変える
matchMedia
でほぼCSSのメディアクエリと同じようなことができます。
スマホの画面でスクロールアニメーションさせたくないという場合などに。