GSAP 3.10.2でScrollTriggerのpinを有効にした状態でウインドウリサイズすると固定要素が壊れる時

2022/04/29（金）

GSAP3.10.2でScrollTriggerを用いてアニメーションを実装中に、Windowリサイズ後にpinで固定していた要素がぐちゃぐちゃに崩れる現象に出会い半日潰してしまったので備忘録として記しておきます。

結論から言うとGSAP3.10.2固有のバグで、3.10.3以降へアップデートするとすべて解決します。

実際に現象が起きたコードは以下のようなものです。サンプルにもあるような至ってBasicな形でScrollTriggerインスタンスを生成しました。

ScrollTrigger.create({
  trigger: '#example',
  start: 'top 80px',
  end: 'bottom 0%',
  pin: true,
})

pinを有効化している事を除けば何も言うこともなく粛々と実装を進めクロスブラウザにて確認をしていた所、iPad Safariで上下にスクロールをするとなぜかpin要素が固定されず崩れた状態になる現象が見られました。
発生条件を突き止めていくとどうやらWindowをリサイズするとpin要素は崩れるらしく、iPad Safariでは上下のスクロールでリサイズイベントが発生する事からpin要素の崩れに気がつけた、という経緯でした。

WindowリサイズするとiPad Safariに限らずすべての環境下で確認できたのでこれは私の実装に何か問題がありそう、、ということで色々と調査しだします。

過去の実装経験からCSSにてwill-changeなどを使っているとScrollTriggerの挙動がおかしくなる、またDOM構造に無理がある時にも正しくpin固定されない事があったのでその辺りを調査しますが一向に解決できず、CSSをすべて空にしDOM構造もシンプルな構成にした上でも尚解決できなかったのでいよいよGSAP自体のバグを疑い調べることに。

GSAPのフォーラムは非常にアクティブなので即見つかりました。投稿日付を見る限り私が気がついた時とほぼ同じタイミングでの投稿です。
https://greensock.com/forums/topic/31699-scrolltrigger-pin-breaks-on-page-rsize/

上記投稿から2日後にはベータバージョンの3.10.3bがReleaseされたので割と影響範囲大きめのバグだったようです。
その後無事3.10.3もReleaseされアップデートするとpin要素が崩れは解消されました。

原因を突き止めるまでに半日は些か時間掛かりすぎの様な気もしますが、現象の確認 → 発生条件の確定 → 自分の実装が起因するか否かの切り分け → GSAP自体のバグの可能性の確認という感じで淡々と調査できて何だか楽しくもありました。

GSAPのフォーラムには本当に助けられます。