要素が2000pxほど固定して、次の要素へ横スクロールするようにしたい。

ScrollTrigger.jsを使用して要素が2000pxほど固定して、次の要素へ横スクロールするようにしたいと思っています。
横スクロールの実装はできましたが、要素の固定がなかなかうまく行きません。

下のテストページを閲覧していただけるとわかりやすいと思うのですが、「ONE」「TWO」「THREE」「FOUR」とういうコンテンツが横スクロールします。
その「ONE」「TWO」「THREE」「FOUR」の要素がそれぞれ2000pxほど固定して、次の要素へスクロールするような仕様にしたいです。その固定している間に中の文字が大きくなったり、透過してフェードしたり、横からインしてきたりするようなアニメーションをイメージしていまがScrollTrigger.jsを初めて使うのでなかなかうまくいきません。

ScrollTrigger.jsで実現できればと思っていますが、もし他に良い方法やプラグインなどあったらご教示いただけますと幸いです。

簡素なテストページを作成しています

https://nakashima.lsv.jp/animation_test4/

該当のソースコード

　//HTMLの該当箇所
<div id="pinContainer">
                    <div id="slideContainer" >
                        <section class="panel blue ">
                            <div class="textBox"><b class="text2">ONE</b></div>
                        </section>
                        <section class="panel turqoise">
                            <div class="textBox"><b class="text2">TWO</b></div>
                        </section>
                        <section class="panel green">
                            <div class="textBox"><b class="text2">THREE</b></div>
                        </section>
                        <section class="panel bordeaux">
                            <div class="textBox"><b class="text2">FOUR</b></div>
                        </section>
                    </div>
                </div>

//cssの該当箇所
 #pinContainer {
     position: relative;
  width: 100%;
  height:100vh;
  overflow: hidden;
}
#slideContainer {
    position: absolute;
  left: 0;
  display: flex;
  width: 800%;
    height: 100vh;
}
.panel {
    height: 100vh;
    width: 200%; /* relative to parent -> 25% of 400% = 100% of window width */
    position: relative;
}
.textBox{
     display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
   width: 50%;
}
.text2{
    font-size: 30px;
}
.blue {
	background-color: #3883d8;
    
}
.turqoise {
	background-color: #38ced7;
  
}
.green {
	background-color: #22d659;
   
}
.bordeaux {
	background-color: #953543;
}

//jsの該当箇所
$(function () {
const el = document.querySelector('#slideContainer');

gsap.to(el, {
  xPercent: -87.5,
  ease: 'none',
  scrollTrigger: {
    trigger: '#pinContainer',
    start: 'top top',
    end: `+=${el.clientWidth}`,
    scrub: true,
    pin: true,
    markers: true
  },
});
});

試したこと

.panelの要素をpinで固定してみましたがうまく動きませんでした↓
$(function () {
const el = document.querySelector('#slideContainer');

gsap.to(el, {
xPercent: -100,
ease: 'none',
scrollTrigger: {
trigger: '.panel',
start: 'top top',
end: '+=2000',
pin: true,
scrub: true,
markers: true
}
});
});

.panelの中に.textBoxを増やして、それをpinで固定を試してみましたがうまく行きませんでした。
$(function () {
const el = document.querySelector('.textBox');

gsap.to(el, {
xPercent: -100,
ease: 'none',
scrollTrigger: {
trigger: '.textBox',
start: 'top top',
end: '+=4000',
pin: true,
scrub: true,
invalidateOnRefresh: true,
markers: true
}
});
});