WebアニメーションをGSAPでつくろう｜スクロール

複雑なWebアニメーションを簡単に実装することの出来るライブラリ「GSAP」。

この記事ではGSAPでもサイト全体を大きく演出することの出来る「スクロール」に関する機能について深堀りしていきます。

スクロールをするだけであっちこっちサイト内で移動したり、一つのアイテムがくるくる回ったり、ほとんどのことがGSAPで出来てしまいます。

実装自体はAIに任せたらすぐにでも可能ですが、仕組みや中身を知って調整できるようになるとより細かい演出、思ったようなアニメーションを作ることが出来ます。

公式サイトを参考に、なるべく噛み砕いて解説していきます。

• 参考：Scroll | GSAP
• 参考：ScrollTrigger | GSAP | Docs & Learning
• 参考：ScrollTrigger | GSAP Demo Hub
• 参考：Made With Gsap

手っ取り早く導入方法を知りたい方はこちら→GSAPのプラグインScrollTriggerの導入

ScrollTrigger(スクロールトリガー)とは？

GSAPにはプラグインが色々ありまして、その中の一つのスクロールアニメーションを実装するためのプラグインが「ScrollTrigger」です。

Webサイトを見ていて、こんな動きを見たことないでしょうか？

• 下にスクロールすると、文章や画像がふわっと現れる
• スクロールしても、ある要素が画面に張り付いたまま動く
• 縦にスクロールしているのに、画面が横に流れていく

こういったスクロールに合わせて動く演出は、大体スクロールトリガーで作られています。わかりやすいのはAppleのサイトの動きかなぁと思います。

スクロールトリガーを調整する要素は以下のようなものがあります

• スクロール発火 … 下に来たらフワッと出る
• ピン留め（pin） … スクロールしても画面に貼り付いて止まる
• スクラブ（scrub） … スクロール量に連動してアニメが進む／戻る
• パララックス … 背景と前景が違う速度で奥行き表現
• 横スクロール（horizontal scroll） … 縦操作で画面が横に流れる
• スナップ（snap） … スクロールが区切りごとにピタッと吸い付く

GSAPのプラグインScrollTriggerの導入

ScrollTriigerはGSAP本体とは別のプラグイン(追加機能)になりますので、読み込むファイルが

1. GSAP本体
2. ScrollTrigger

の2つとなります。

手段は3種類

• CDNで読み込む
• npmでパッケージダウンロード
• ZIPファイルでダウンロード

ここでは、一番手軽なCDNで読み込む方法を解説します。

＼コピペ用／

<!-- ① GSAP本体 -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>

<!-- ② ScrollTrigger（追加プラグイン） -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>

</body>の直前に入れます。

ポイントは読み込む順番です。GSAP本体を先に読み込んでから、ScrollTriggerを読み込みます。逆にするとScrollTriggerが本体を見つけられず、エラーになります。

プラグインを有効化する（忘れがち）

また、読み込んだだけではまだ使えません。javascript側に次の1行を書いてScrollTriggerを「有効化」する必要があります。

gsap.registerPlugin(ScrollTrigger);

これを書き忘れると、コードは合っているのに「なぜか動かない」という状態になります。僕も最初これでハマりました。ScrollTriggerを使うときは、コードの最初におまじないとして書いておきましょう。

基本の使い方｜スクロールで発火

いちばん基本的な使い方が、「その位置までスクロールしたら、アニメーションを発火させる」というものです。下にスクロールしていくと、文章や画像がふわっと出てくる、あの動きですね。

書き方はシンプルで、いつものアニメーションにscrollTriggerを足すだけです。

gsap.from(".box", {
  y: 60,
  opacity: 0,
  scrollTrigger: {
    trigger: ".box", 
    start: "top 80%"
  }
});

大事なのはこの2つです。

• trigger … 「どの要素」を見張るか
• start … 「どこまで来たら」発火するか

start: "top 80%"は、ざっくり「要素が画面の下のほうに入ってきたら発火」という意味です。この書き方は少しクセがあるので、次の見出しでじっくり解説します。まずは下のデモで動きを見てみましょう。

小さい画面の中をスクロールすると、点線（発火ライン）にboxが入ったタイミングで、ふわっと現れます。

点線（発火ライン）にboxの上端が触れた瞬間に、ふわっと出てきますよね。これがscrollTriggerの基本動作です。

markersで発火位置を見える化する

「思った位置で発火しない」というとき、便利なのがmarkersです。trueにすると、開発中の画面に発火ラインが表示されます。

scrollTrigger: {
  trigger: ".box",
  start: "top 80%",
  markers: true 
}

さきほどのデモに出ていた点線を、GSAPが自動で表示してくれるイメージです。「start」「end」の位置が線で見えるので、ズレを直すときに重宝します。

ただし本番では消すのを忘れずに。markers: trueを消すかfalseにすれば、線は表示されなくなります。あくまで開発中のデバッグ用、と覚えておきましょう。

start / end の見方｜どこで発火するか

ScrollTriggerでいちばん最初につまずくのが、このstartの書き方です。"top 80%"みたいな呪文みたいなやつですね。でも仕組みが分かれば簡単なので、ここで攻略しておきましょう。

startは「2つの言葉」でできている

start: "top 80%"は、スペースで区切られた2つの言葉の組み合わせです。

• 1つ目（top）… 要素のどこか
• 2つ目（80%）… 画面のどこか

つまり"top 80%"は、「要素の上端」が「画面の上から80%の位置」に来たら発火、という意味になります。

「要素のどこを」「画面のどこに合わせるか」をセットで指定する、と覚えるとスッキリします。

数字を変えると発火位置が変わる

2つ目の数字（画面の位置）を変えると、発火するタイミングが変わります。下のデモで、ボタンを切り替えてからスクロールしてみてください。点線（発火ライン）の位置が動くのが分かります。

• top 80% … 画面の下のほうで発火（早めに出る）
• top 50% … 画面の真ん中で発火
• top 20% … 画面の上のほうで発火（しっかり引きつけてから出る）

数字が大きいほど早く、小さいほど遅く発火する、と覚えておけばOKです。

endも同じ仕組み

endは「どこで終わるか」を指定するもので、書き方はstartと同じです。さらに、こんな書き方もよく使います。

start: "top 80%",
end: "+=500"

"+=500"は「開始位置から500pxぶん」という意味です。endは、次に解説するscrub（スクロール連動）やpin（固定）で「どれだけの長さ動かすか」を決めるときに効いてきます。

発火のタイミングだけ使いたい場合は、startだけ覚えておけば十分です。

endはscrubやpinで使うことが多いですね。一工夫加えたい時、ここぞという演出の時に使います。

scrub｜スクロールに連動させる

ここまでのアニメーションは「発火型」でした。発火ラインを越えたら再生スタート、あとは最後まで勝手に流れる、という動きです。

それに対してscrub（スクラブ）を使うと、スクロールの量とアニメーションの進み具合がリンクします。

• スクロールを進める → アニメーションも進む
• スクロールを止める → アニメーションも止まる
• スクロールを戻す → アニメーションも巻き戻る

スクロールバーが、そのままアニメーションの再生バーになるイメージですね。

書き方は、scrollTriggerの中に1行足すだけです。

gsap.to(".box", {
  x: 300,
  rotation: 360,
  scrollTrigger: {
    trigger: ".box",
    start: "top 80%",
    end: "+=400",    
    scrub: true 
  }
});

ここで前の見出しで触れたendが効いてきます。startからendまでのスクロール区間が、アニメーションの0%〜100%に対応する、という仕組みです。

下のデモでスクロールしてみてください。進めると箱が転がり、戻すと巻き戻ります。

発火型と違って、再生の主導権がこっち（スクロールする側）にあるのが分かると思います。

scrub: true と scrub: 1 の違い

scrubにはtrueのほかに、数字も入れられます。

• scrub: true … スクロールにピッタリ張り付いて動く
• scrub: 1 … 1秒かけて、なめらかに追いかけてくる

trueだとスクロールのガクつきがそのままアニメーションに出ます。数字を入れると少し遅れてぬるっと付いてくるので、上品な動きになります。迷ったらscrub: 1がおすすめです。

pin｜要素を画面に固定する

続いてはpin（ピン）です。スクロールしている間、要素を画面に貼り付けたまま固定できます。

「スクロールしてるのに、このセクションだけ画面に止まってる」というあの動きですね。固定されている間に背景が切り替わったり、製品がくるくる回ったり。リッチなサイトの演出は、だいたいこのpinが土台になっています。

書き方はこれだけです。

ScrollTrigger.create({
  trigger: ".section",
  start: "top top",  
  end: "+=500",        
  pin: true
});

ここでもendが活躍します。"+=500"なら「500pxスクロールするあいだ固定」という意味で、固定する長さはendで決めるわけです。

下のデモでスクロールしてみてください。青いセクションが上に着いたところで固定され、しばらくスクロールすると解放されて、また流れていきます。

青いセクションだけが、250pxぶんのスクロールの間、画面に貼り付いているのが分かると思います。

そして、このpinが本領を発揮するのが「固定している間に、何かを動かす」という組み合わせです。次でやってみましょう。

タイムラインと組み合わせる｜スクロール演出の集大成

最後に、ここまで覚えたことを全部組み合わせてみます。使うのは次の4つです。

• タイムライン … 複数の動きを順番につなぐ（前回の記事のやつ）
• pin … セクションを画面に固定する
• scrub … スクロールに連動させる
• end … どれだけの長さ演出するかを決める

作るのは、大手メーカーの製品ページでよく見る「画面が固定されて、スクロールに合わせて製品がくるくる回りながら、説明テキストが切り替わっていく」あの演出です。

仕組みはこうなっています。

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".stage",
    start: "top top",
    end: "+=1600",   
    pin: true,       
    scrub: true   
  }
});

// 固定中の演出をタイムラインで組む
tl.to(".box", { rotation: 360, ease: "none", duration: 4 }, 0);         
tl.to(".text1", { opacity: 0 }, 1).to(".text2", { opacity: 1 }, 1);    
tl.to(".text2", { opacity: 0 }, 2).to(".text3", { opacity: 1 }, 2);   
tl.to(".text3", { opacity: 0 }, 3).to(".text4", { opacity: 1 }, 3); 

ポイントは、タイムラインにscrollTriggerを持たせているところです。こうすると、タイムライン全体の再生バーがスクロールに置き換わります。

テキスト切替の, 1や, 2は、前回の記事でやったposition引数（数字で書く絶対指定）です。タイムラインの1秒地点・2秒地点に切り替えを配置して、回転の進み具合とテキストを同期させています。

下にデモを置きました。このままスクロールしてみてください。画面が固定されて、演出が始まります。

どうでしょう。固定（pin）して、スクロールに連動（scrub）させて、固定中の演出はタイムラインで組む。やっていることは、これまでのパーツの組み合わせだけです。

もっとリッチな実例を見たい方は、GSAP公式のスクロール演出ショーケースがおすすめです。「これもScrollTriggerでできるのか」という実例が山ほど見られます。

AIに指示するコツ

前回の記事に続いて、AIに頼むときのコツです。基本は同じで「用語を使って、具体的に、段階的に」ですが、ScrollTriggerならではのポイントがいくつかあります。

コツ①｜「いつ・どこで・どう連動するか」を伝える

ScrollTriggerの指示で大事なのは、この記事で覚えた3点セットです。

• どの要素で発火するか（trigger）
• どの位置で発火するか（start）
• 発火型か、連動型か（scrubの有無）

とくに「発火型か、scrubで連動か」を最初に伝えると、出てくるコードのブレが激減します。ここが曖昧だと、AIはどちらかを勝手に選びます。

数字を指定するのが難しかったら、単語を指定したり、スクリーンショットを撮ってここでアニメーションが動くようにしてほしい、といった指示を出したらいいです。

開発ツール(DevTool)を使うことができれば、クラス名で指定したらより精度が高まります。

• スクロールに連動する
• スクロールしたら動く

この2つが違うことに意識できたら実装方法が変わるので指示出しで気をつけてください。

違いに気づかずに実装時に2週間無駄にしたことがあります（泣）

コツ②｜「あのサイトのあの動き」はそのまま言っていい

スクロール演出は言葉で説明しにくいので、「大手メーカーの製品ページみたいに、画面が固定されて製品が回るやつ」「縦スクロールの途中で横に流れるギャラリーみたいなやつ」と、見たことのある動きをそのまま伝えるのが早いです。

参考サイトのURLを渡せるなら、それが一番確実です。AIは有名どころのスクロール演出のパターンをだいたい知っているので、「あれっぽく」でかなり通じます。

コツ③｜うまく動かないときは「症状」を伝える

ScrollTriggerは、ページの構造やテーマのCSSと干渉して、思わぬ不具合が出ることがあります。そんなときは「動かない」だけじゃなく、症状を具体的に伝えましょう。

• 「発火しない」→「スクロールしても何も起きない。markersを付けたらstartの線が変な位置にある」
• 「pinがおかしい」→「pinを使ったらスクロールバーが延々と伸びていく」
• 「ガクつく」→「scrub: trueだとカクカクするので、なめらかにしたい」

実は2つ目、この記事を書いているときに実際に起きたやつです。症状をそのまま伝えたら、原因（テーマのレイアウトとpinの干渉）と回避策まで一気にたどり着けました。markers: trueで見た状況を添えるのも効果的です。

コツ④｜WordPressなど、動かす環境を先に伝える

同じコードでも、素のHTMLページとWordPressのテーマの中では動き方が変わることがあります。とくにpinはテーマのCSSと干渉しやすいので、「WordPressの記事内で動かしたい」「SWELLというテーマを使っている」と最初に伝えておくと、環境に合わせたコードを出してくれます。

用語で枠組みを伝えて、症状で軌道修正する。ScrollTriggerはこの2つができれば、AIとの共同作業がかなりスムーズになります。

まとめ

当記事では、GSAPのScrollTriggerについて以下の内容を深掘りしてきました。

• ScrollTrigger … スクロール連動アニメーションを作るプラグイン（本体とは別に読み込み＋有効化）
• 基本の発火 … triggerとstartで「どの要素が・どこに来たら」
• start / end … 「要素のどこ」＋「画面のどこ」の2つの言葉で読む
• scrub … スクロール量とアニメーションを連動させる（戻すと巻き戻る）
• pin … 要素を画面に固定する（固定の長さはendで決める）
• 集大成 … タイムライン×pin×scrubで、製品ページ風のリッチな演出

「スクロールしたら動く（発火型）」と「スクロールに連動して動く（scrub）」。この2つの違いが分かっただけでも、この記事を読んだ価値があると思います。AIへの指示も、サイトの動きの見え方も、ここが分かれ目です。

そして気づいた方もいるかもしれませんが、集大成のデモでやったことは、基本の動き・タイムライン・ScrollTriggerの組み合わせだけでした。リッチなサイトの演出も、分解すればここまで学んだパーツでできています。

GSAPの解説は、基本編・タイムライン編・ScrollTrigger編で一区切りです。

• 基本編｜to / from・stagger・イージング
• タイムライン編｜順番につなぐ・position引数
• ScrollTrigger編｜この記事

実装はAIに任せていいと思います。むしろ使わない手はないですよね。

ただ、出てきたコードを読んで「ここを直せばいい」と分かることが大事になります。

この3記事の内容を押さえておけば、GSAPのコードはだいたい読めるようになっているはずです。あとはAIと一緒に、思いどおりのアニメーションを作っていきましょう。

最後までご覧いただき、ありがとうございました！