Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

5
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2023-09-07

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

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

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の応用

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

5
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?