Next

皆さんはGSAPのpinを使ったときに色々うまくいかなかった経験ありませんか？
何かと問題が起きがちなpinについて1つ問題が起こり、一旦の解決できたのでその記録です。

問題となった事象

PCでは問題なく動作していたのですが、SPのアドレスバーリサイズに引っかかってしまいサイト内がぎこちない挙動になってしまいました。
見た感じ、アドレスバーのリサイズ時にrefresh(再計算)が起こることによって高さが変わることが原因だと考えました。

対処方法

正規の対応かわかりませんが以下で解決しました。

pinを設定している親要素の高さを固定値にする

最初は高さを設定していなかったのですが、固定値を設定しました。

endの設定を変える

挙動が不安定の時は以下のようにしていました。

end:"+=270%"

こちらを以下に変えます。

end:`+=${2500 - window.innerHeight}px`

上記の2つの項目を行うことによって、アドレスバーでのリサイズ問題は解決しました。