gsapのscrollTriggerのpinの使い方 | 画像のピン留めの参考例とずれるときの対処方法

2021年8月30日2025年1月28日gsap

gsapのscrollTriggerのpinの使い方を紹介します。
画像のピン留めの参考例と、ずれるときの対処方法も合わせて紹介します。

gsapのscrollTriggerのpinのデモ

See the Pen
gsap scrollTrigger pin by Sosak (@Sosak2021)
on CodePen.

gsapのscrollTriggerのpinの使い方

ScrollTrigger.create({
  trigger: '.b2',
  pin: true,
  markers: true,
  // end: 'bottom 30%' //などと設定するとfixedの期間がより短くなる
})

pinは、gsapのscrollTriggerとは独立して生成することができます。
ScrollTriggerと大文字なので注意しましょう。
pinはリンクさせる必要がないので大文字ScrollTriggerでcreateすることができます。
pinはposition: fixedが付与されることで、固定することができます。
そして、triggerに指定した要素の高さを超えると動き出します。

pinを使って画像を固定(ピン留め)して切り替えるデモ

See the Pen
gsap pin images by Sosak (@Sosak2021)
on CodePen.

CSSの注意点

.pin-spacer {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); //四角形
}

pinをつけるとCSSではpin-spacerというdivタグが生成されるので、それの形を四角形にかえる必要があります。

JavaScript

ScrollTrigger.create({
    trigger: ".event1",
    pin: ".event1 .pinSection",
    markers: true,
    start: "top top",
    end: "bottom top",
  });

  ScrollTrigger.create({
    trigger: ".event1",
    pin: ".event2 .pinSection",
    markers: true,
    start: "top top",
    end: "bottom top-=100%",
  });

 ScrollTrigger.create({
    trigger: ".event2",
    pin: ".event3 .pinSection",
    markers: true,
    start: "top top",
    end: "bottom top-=100%",
  });

ScrollTrigger.create({
    trigger: ".event3",
    pin: ".event4 .pinSection",
    markers: true,
    start: "top top",
    end: "bottom top-=100%",
  });

上のようにあえてバラバラの設定にしています。

画像の開始位置の設定で画像の頭から固定したいので、’top top’とします。

end: 'bottom top-=50%’とすることで、写真のbottomがビューポートの真ん中にきたら動くようになります。
画像を最後まで固定し続けたいならendは’bottom top-=100%’とすればOKです。

コードをもっと効率化したい場合は、以下のようにforEachなどでループして処理します。

const events = [".event1", ".event2", ".event3"];
events.forEach((event) => {
  ScrollTrigger.create({
    trigger: event,
    pin: `${event} .pinSection`,
    start: "top top",
    end: "bottom top-=100%",
  });
});

ピン留め時に空白スペースを制御する

デフォルトではピン留め時に空白スペースが確保されますが、pinSpacing: false で無効化できます。

ScrollTrigger.create({
  trigger: ".element",
  pin: true,
  pinSpacing: false,
});

ScrollTriggerがずれる主な原因

CSSの影響

要素に position: relative や transform が適用されている場合、ずれが発生することがあります。
解決策としては、ScrollTriggerを使用する要素の親要素に適切な position を設定することです。

.parent-element {
  position: relative;
}

ピン留め中のレイアウトの変更

ページの高さが動的に変化するとずれが発生する場合があります。
解決策としては、ScrollTriggerの再計算を行うことで解決できます。

ScrollTrigger.refresh();

ウィンドウサイズの変更時にpinが正常に動作しない

レスポンシブの対応で、ウィンドウサイズの変更時にpinが正常に動作しないことがあります。
解決策としては、ScrollTrigger.matchMedia を利用してブレイクポイントごとの挙動を定義します。

ScrollTrigger.matchMedia({
  "(min-width: 768px)": function () {
    ScrollTrigger.create({
      trigger: ".element",
      pin: true,
      start: "top top",
      end: "bottom top",
    });
  },
});