gsapのscrollTriggerのpinの使い方

2021年8月30日gsap

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%’とする必要があります。