アコーディオンとGSAPのスクロールトリガーを併用すると、アコーディオンの開閉によってスクロールトリガーの発火位置がズレる問題が発生します。
この問題への対処法をご紹介します！
目次
ScrollTrigger.refresh を使おう！
スクロールトリガーの発火位置がおかしくなる原因は、アコーディオンの開閉によってその位置がズレてしまうからです。
よって、アコーディオンを開閉するたびにスクロールトリガーをリフレッシュする必要があります。
それを実現するのが、以下のコードです！
アコーディオンの開閉処理の後に入れましょう💡
ScrollTrigger.refreshなんだかまだ直らないぞ…？？そんな時は
そんな時は、アコーディオンが開閉しきる前に ScrollTrigger.refresh が実行されてしまっている可能性があります。
コードを以下のように修正しましょう！
gsap.delayedCall(0.2, ScrollTrigger.refresh);
// 数字はアコーディオン開閉に要する時間に合わせるか、少し長めにする
これでアコーディオンが開閉しきった後にスクロールトリガーをリフレッシュすることができ、発火位置を正常に戻すことができます！
アコーディオン処理サンプル：全体
JavaScript
// アコーディオン ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
window.addEventListener("DOMContentLoaded", function () {
let accordionItems = document.querySelectorAll('.js-accordion__item');
accordionItems.forEach(function (item) {
item.addEventListener('click', function () {
let content = item.querySelector('.js-accordion__content');
if (item.classList.contains("is-active")) {
// アコーディオンが開いている場合は閉じる
content.style.maxHeight = null;
item.classList.remove('is-active');
} else {
// アコーディオンが閉じている場合は開く
content.style.maxHeight = content.scrollHeight + 'px';
item.classList.add("is-active");
}
// アコーディオンの開閉後にScrollTriggerを更新
gsap.delayedCall(0.2, ScrollTrigger.refresh);
});
});
});HTML
<ul class="faq__list">
<!-- item01 -->
<li class="faq__item is-active js-accordion__item">
<div class="faq__title js-accordion__title">タイトル01</div>
<div class="faq__description text js-accordion__content">内容内容内容内容内容内容</div>
</li>
<!-- item02 -->
<li class="faq__item js-accordion__item">
<div class="faq__title js-accordion__title">タイトル02</div>
<div class="faq__description text js-accordion__content">内容内容内容内容内容内容</div>
</li>
<!-- item03 -->
<li class="faq__item js-accordion__item">
<div class="faq__title js-accordion__title">タイトル03</div>
<div class="faq__description text js-accordion__content">内容内容内容内容内容内容</div>
</li>
</ul>scss
※以下は動きに必要な最低限のスタイルのみです。
.faq__item.is-active {
.faq__description {
max-height: 800px; //最初に開いておきたい要素の高さより大きくする
}
}
.faq__description {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.3s ease;
transition: max-height 0.3s ease;
}
まとめ
アコーディオンとGSAPのスクロールトリガーを一緒に使っているときに、スクロールトリガーの発火位置がずれる問題へ対処したいときは、アコーディオン開閉処理の最後で、👇️を実行しましょう！
gsap.delayedCall(0.2, ScrollTrigger.refresh);
// 数字はアコーディオン開閉に要する時間に合わせるか、少し長めにするちゃんとリフレッシュ用のメソッドが用意されていることに感動しました！
きっとめっちゃ頭の良い人が作ってるんだろうな、、さすがGSAP！
ここまでご覧いただき、ありがとうございました🙏
