スクロール操作の新次元：GSAPのScrollTriggerでstart, end, pinを使う方法

gsapのScrollTriggerのstart, end, pinについて忘れてしまっていたのですぐ思い出せる様にわかりやすくまとめて行こうと思います。これらは基本的かもしれませんがとても便利なプロパティだと思います。

以下、デモとなります。
※開発中はmarkerをtrueにしておくとstart,endが視覚に確認できます。

See the Pen scrollTriggerDemo by FrontendKanazawa (@jikkensya) on CodePen.

start, endの値について

値は"triggerのエレメントのy スクリーンのy"といった順番で指定できます。
言葉よりもデモに表示されているマーカーと値を見比べた方が分かりやすいかもしれません。

01

一番目のセクション(.s1)には、

start: "top+=50 top",
end: "bottom-=50 bottom",
markers: true

と設定されてあるため、セクションの一番上から50px分yを追加した位置にstartマーカーが表示されています。また、スクリーンの一番上にscroll-startマーカーが表示されています。
この2つのマーカーが重なったときに指定したアニメーション等が発火します。

02

2番目のセクションのセクション(.s2)はpinのデモです。
大きな違いはpinを加えた事意外にendの最後の値をtopにしている事です。
これによりスタートが発火してから、セクション(.s2)の一番下がスクリーンの一番上にヒットするまでセクション(.s2)が固定されます。これも言葉だと少し分かりにくいのでデモのmarkersの設定を変えて視覚的に確かめると良いかもしれません。

start: "top top",
end: "bottom top",
pin: true,
markers: false

03

03は01と同じですがmarkersがfalseになっています。
markersを各セクションごとに分かりやすく表示できたら良かったのですがmarkersのスタイルは基本的に編集できないようでした。そのため01のマーカーだけを表示しています。

pinの応用

最後に参考までとなりますが、以下のデモのような横スクロールなど様々な応用ができるのではないかと思います。

See the Pen Horizontal Scroll by FrontendKanazawa (@jikkensya) on CodePen.