こんにちは、CTO兼エンジニアのづやです。
サイトにスクロール連動するアニメーションつけるときには、GSAP+ScrollTriggerの組み合わせでいつも実装しています。
▼ScrollTriggerに関連するLIGブログの関連記事 GSAPでこんなこともできる！ スクロールでテキストが1文字ずつ出てくる会話風アニメーション GSAPでこんなこともできる！途中から横にスクロールするページを作る方法
ぼこ
ぼこ
ただ、慣性スクロールと組み合わせたいときに、ちょっと工夫が必要で困っていました。
2022年3月31日のバージョンGSAP3.10のリリースとともに、公式で慣性スクロールに対応したプラグインがリリースしたため、早速試してみたまとめ記事です。
※2022年の4月に執筆しています
※有料プラグインなので、ライセンス確認して適切なライセンスを購入してください
目次
使い方
使い方は他のプラグインと一緒です。
npmを利用した環境で利用しているので、いつものようにGSAPをいれて、適当な場所にプラグインファイルを置いたら読み込みます。
npm install gsap
そうしたのちにJSでプラグインの利用を宣言します。
import { gsap } from 'gsap'
import { ScrollSmoother } from './gsap/ScrollSmoother'
gsap.registerPlugin(ScrollSmoother)
これで利用する準備が整いました。
このライブラリは慣性スクロールをかけたい要素を2つのdivで囲んであげる必要があります。
<div id="smooth-wrapper">
<div id="smooth-content">
ここに任意のコンテンツ
</div>
</div>
あとはJS側で下記のように呼び出してあげてれば、もう慣性スクロールが利用できちゃいます。
const scrollSmoother = ScrollSmoother.create()
すごく簡単です。またこのライブラリは通常のスクロールを利用してくれているので、他のスクロールに影響するライブラリが使えなくなるようなリスクがとても低いです。既存で存在していたScrollTriggerを利用した処理は、ほぼ問題なく動作しました。
createの際はいろいろなオプションを渡せます。
公式に全部のってますが、デフォルトでもあんまりこまらなそうですが使いそうなものだけ。
const scrollSmoother = ScrollSmoother.create({
smooth: 1, // デフォルト0.8 遅延具合を秒数で指定します。調整でスクロール感がだいぶ変わる。0.6くらいが好き
ease : 'Power1.easeIn' // イージング。gsapで用意されてるのも指定できる。デフォルトが１番いいんじゃないか説がある。今指定してるイージングだとすごく気持ち悪いスクロールになります
})ちょっとだけ実践的なTips
実際のサイトで試してみて、ちょっとだけ工夫が必要だった点を何個かまとめてみました。
Fixed要素が変なとこいく
当たり前のことですが、慣性スクロール対象内にFixedの要素があると、位置がおかしくなりました。
解決策はとても簡単です、対象範囲の外におきましょう、Fixed要素を。今回のサンプルでいうと「id=”smooth-wrapper”」の外ですね。
pjaxなど非同期遷移してるサイトで、ページ単位のFixed要素があるとちょっとめんどいですね、先に考えておくと幸せになれると思います。
position:stickeyが動作しなくなる
既存のスクロールイベントを利用すると聞いたから、もしかしてなんもしなくてもうまくいのではとちょっと期待していたところ、当たり前のように動きませんでした。
対応策としては、ScrollTriggerのpinを使って再現してあげるのがいいと思います。公式のフォーラムでもそういっているので間違いないです。
参考：Issue with ScrollSmoother & sticky columns
GSAPはフォーラムで解決することが非常に多いので、困ったら英語で探すのがおすすめです。
DOMが更新されてスクロール位置が変わってしまった
動的な要素があったりでDOMが更新され高さが変わると、スクロールが正しく動作しないときがありました。この場合も簡単で、再度生成してあげると正常に動作します。
最初kill()していたのですが、create時に自動でkillしてくれているようなので不要でした。
// 引数を同じにしたいと思うので、init的な関数を作って呼ぶほうがおすすめです
ScrollSmoother.create({
smooth: 1
})iPhoneでのパフォーマンスが悪くなる
ScrollTriggerのpinを使っている際に、移動の度合いが激しいとプルプルしてしまう現象が発生しました。これがどうしても解決できなくて、iOSでは慣性をきることになりました。
もっといい解決方法があるのかなぁ、この記事が公開される頃にはあるといいなぁ。
まとめ
ScrollTriggerは素晴らしいライブラリだと思っていて、ガンガンつかっているのですが、慣性スクロールいれたいとなると考慮することが多くて大変でした。
このライブラリのおかげでだいぶ導入コストがさがるのではないかと思います。
ではまた！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
