【JavaScript】GSAPのピン留め（pin）とscrubを活用して、動きをもっと自在に操ろう！

タグ :

JAVASCRIPT

PROGRAMMING

こんにちは！今回は、GSAPの中でも特に便利な機能「pin」と「scrub」について、詳しく解説していきます！
• 要素を固定したい
• スクロールとアニメを連動させたい

という方に、ぜひ知ってほしい2つのオプションです！

1 pin：ピン留めってどういうこと？
2 scrub：スクロールに合わせてアニメーション
3 pinとscrubは組み合わせOK！
4 scrub: true を使わないとどうなるの？
5 pinとscrubを使ったおしゃれでシンプルなセクション固定アニメーション
6 まとめ
7 ワンポイントTips

pin：ピン留めってどういうこと？

pin: true を使うと、指定した要素がスクロール中に一時的に固定（ピン留め）されます。

使い方（基本）

See the Pen
Untitled by ryotom (@ryotam-smoke)
on CodePen.

このコードでは、.box 要素がスクロール中に固定されます。

pinを使うとどうなる？

• ページの一部を「固定」して目立たせられる
• スクロール量に合わせて何かを演出したいときに便利
• スライドショーやヒーローセクションによく使われる

scrub：スクロールに合わせてアニメーション

一方、scrub はスクロール位置とアニメーションの進行を連動させるオプションです。

使い方（基本）

See the Pen
Untitled by ryotom (@ryotam-smoke)
on CodePen.

このコードでは、スクロールするたびに .box が左右に動きます。
つまり、「ユーザーのスクロール＝アニメーションの再生コントローラー」になるんです！

scrubの特徴

• アニメがぬるっとスムーズに動く
• 動画のタイムラインのように動きを操作できる
• scrub: 1 のように数値で遅延をつけることも可能

pinとscrubは組み合わせOK！

この2つ、同時に使うとさらに効果的です。

See the Pen
Untitled by ryotom (@ryotam-smoke)
on CodePen.

この例では、スクロールに合わせて .box が回転しつつ、途中で固定されます。
インパクトのある演出にしたい時にピッタリ！

scrub: true を使わないとどうなるの？

アニメーションはスクロール量に連動せず、「発火して再生されるだけ」になります。

• .box が特定の位置に来た「瞬間」に、アニメーションが
通常のGSAPアニメーションとして再生されるだけになります。

• スクロールを戻しても、アニメーションは巻き戻されません。

実際のイメージで比較

設定	動きの特徴
scrub: true	スクロールの量に応じてアニメーションが「進む」「戻る」
scrubなし	指定位置に達したときにアニメーションが「一回だけ」再生される

pinとscrubを使ったおしゃれでシンプルなセクション固定アニメーション

以下は、GSAP + ScrollTrigger の pin を使ったシンプルなセクション固定アニメーションのサンプルです。

このデモでは、スクロールするとセクションが一度ピン留めされ、タイトルがふわっと表示される演出になっています。

See the Pen
Untitled by ryotom (@ryotam-smoke)
on CodePen.

では、scrollTriggerのオプションコードの中身をひとつずつ解説していきます。



scrollTrigger: {
  trigger: ".hero",
  start: "top top",
  end: "+=400",
  scrub: true,
  pin: true
},
opacity: 1,
y: 0

trigger: “.hero”

これは「どの要素をきっかけにアニメーションを始めるか」を指定する項目です。
ここでは .hero というクラスのついた要素がトリガーになっています。

イメージ：この要素がスクリーン内に来たら何かを始める！

start: “top top”

アニメーションを開始するスクロール位置を指定します。

この “top top” は、
• 最初の「top」＝ .hero の上端
• 次の「top」＝ビューポート（画面）の上端

という意味です。

つまり、「.hero の上部が画面の上に到達したときに始める」設定です。

end: “+=400”

どこまでのスクロールでアニメーションを続けるかを決めます。
ここでは、スタートから400pxスクロールした地点までをアニメ範囲としています。

この範囲の間でアニメーションが実行されます！

scrub: true

「アニメーションの進行をスクロール量に応じてリアルタイムに追従させる」オプションです。
• true とすると、ユーザーがスクロールするスピードに応じてアニメもぬるぬる動く
• scrub: 1 のように遅延付きにもできる（数字は秒数）

まるでユーザーの手でアニメーションを“再生コントロール”してる感覚にします！

pin: true

「この要素を一時的にスクロール中に固定」する設定です。
指定したセクション（この場合 .hero）が、400pxのスクロール中ずっと画面にピタッと止まって表示されます。

印象的なセクションやヒーローエリアによく使われる！

opacity: 1

これはアニメーションの最終的な透明度です。
最初の状態（opacity: 0）からスクロールに応じてだんだん表示されていく感じになります。

y: 0

アニメーション終了時に、縦方向の位置を元の位置（0px）に戻すという指示です。
初期状態が transform: translateY(50px) などで下にズレていた場合、
この指定でふわっと浮き上がってきたように見えるわけです。

このコードの構造は？

ユーザーが .hero セクションにスクロールしてきたときに、
セクションが一時的に固定され、タイトルが下からぬるっと浮き上がってくるという
アニメーションです！

より高度な設定（pinSpacing, markers, toggleActionsなど）も併用すれば、さらに多彩な演出が可能になります。

まとめ

• pin は、「このセクションをずっと見せておきたい」ときに便利。ふわっと固定され、ページにインパクトを与えます。
• scrub は、「ユーザーのスクロール量とアニメーションをぴったり連動させたい」ときに使います。
特にタイムライン風や連番画像再生に必須！

プロパティ	役割	使用例
pin	トリガー要素をスクロール中にその場に固定（ピン留め）して、背景が動いているように見せる。	pin: true
scrub	スクロール位置に応じてアニメーションを進行・同期させる。動画のシークバーのような挙動。	scrub: trueまたはscrub: 1（←ディレイ付き）