【GSAP】スクロールトリガーのstartをスクロール量で指定したい

平日毎日更新なんて僕には無理。だけど考え方を変えれば「毎日」ではないけど「半年に1回」は継続できているって考え方もある。

そんな感じで自己肯定感を上げていきたいと思う今日この頃です。

（私ごとですが年内フルマラソンに参加してみたくて走り始めました）

本題：スクロールトリガーのstart（end）でスクロール量を指定したいんだ

前回GSAPのスクロールトリガー（scrollTrigger）の使い方についてちょっとだけ触れたのですが、個人的実務でハマったのが「スクロール量」の指定の仕方。

前回記事で紹介したような「inview」的な使い方であれば、start: 'top center'のように文字列の指定なので特に問題はなく使えると思います。（トリガー要素の上部が画面の中央に来た時に発火）

問題になるのは「フロートしたヘッダーメニュー」のような、トリガー要素の位置が変わらないものに適用したい時・・・。

実務ではある程度スクロールしたら、ヘッダーメニューの内容を変えたり、高さを調整したり、背景色を変更したりすることがあります。

最初に試してみたのはこんな感じ↓

少しでもスクロールしたら背景色を赤に変えようと思って、start: ‘top top’を指定してみたのですが全く動きません。まぁ、少し考えればマーカーが交差しないんだから発火しないのは当たり前と気づきます・・・笑

スクローラーの方に「top-=100」を指定で動くやん

この時の私はまだ知らなかった・・・。公式のドキュメントを読み込むということの大切さを・・・。

ってことで色々とGSAPのscrollTriggerについて書かれているみなさんの記事を参考にしまくったわけですが、正直start: 'top top-=100'の意味がわからないまま試してみたら動いたので、当時は一旦はこれでOKにしておきました。

初学者にとって、公式ドキュメントってなんだか難しいことがたくさん書かれているようでとっつきにくいというか、ほぼアレルギーみたいな症状になるじゃないですか？笑

今はとある案件をきっかけにして公式ドキュメントを舐めるように見る癖をつけていますが、初学者（中級者）が最初に目指すのは、公式ドキュメントを読んである程度内容を理解できるようになる。ということが本当に大切だと思います。

ちなみにstart: 'top top-=100'の記述の意味としては、トリガー要素の上部が画面の上部より-100pxになったところで発火するという記述。

position: 'fixed'を指定しているヘッダー要素なので、実際には発火条件を満たしていないような気もする・・・。今は動いているけどこれってバグ的な要素でそのうち改善されるかも？と思ったのでより的確な書き方はないか調べてみました。

素直にスクロール量（100）を書けばそれでええんやで

きちんと公式ドキュメントを探してみると、こんな記述がありました。

Number – An exact scroll value, so 200 would trigger when the viewport/scroller scrolls by exactly 200 pixels.

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1

なんと泣く意味はわかるけど、英語苦手なのでchatGPT先生に聞いたらこういう意味らしい。

数値 – 正確なスクロール値で、ビューポート/スクローラーが正確に200ピクセルスクロールするとトリガーされます。

つまり、最初に実現したかった「100pxスクロールしたら背景色を変える」ためには、単純にstart: '100'って書けば良かったってこと。

急がば回れとはよくいうけれど、誰かが噛み砕いてくれた記事の方がわかりやすいと思っていたのに、実際は公式ドキュメント見ればまるっきり答えが載っていたという残念な結果です。笑

まとめ

とにかく最初は公式ドキュメントを読め！これが今回の教訓です。笑

僕のこの記事を読んでくれているあなたも、まずは公式ドキュメントを見る癖をつけてみてください。

そして、解決できてもできなくも、もう一度このブログに戻ってきてくれたら喜びます。解決できなかった時はコメントを残してくれれば、時間のある時に馳せ参じます。