GSAPで無限ループするWEBページの作成方法【あのSNSも同じ仕組み？】

<div class="container">
    <section class="section section01">
        <h1>セクション1</h1>
    </section>
    <section class="section section02">
        <h1>セクション2</h1>
    </section>
    <section class="section section03">
        <h1>セクション3</h1>
    </section>
</div>

*{
    margin: 0;
    padding: 0;
}
.section{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.section01{
    background-color: crimson;
}
.section02{
    background-color: #333;
}
.section03{
    background-color: skyblue;
}

gsap.registerPlugin(ScrollTrigger);

const container = document.querySelector(".container");//コンテナ要素を取得して代入
// 色を格納
const colors = [
    "#DC143C",// crimson
    "#333333",// black
    "#87CEEB",// skyblue
];

let panelNum = document.querySelectorAll('.section').length;//最初のセクション数を取得
const createSection = (index) => {
    const section = document.createElement("section");// sectionタグを持つ要素を作成
    const h1 = document.createElement("h1");// h1タグを作成
    container.appendChild(section);// コンテナ要素の中に追加
    section.appendChild(h1);// セクション要素の中に追加
    h1.innerHTML = `セクション${index+1}`;// テキスト挿入
    gsap.set(section, {
        backgroundColor: colors[index % 3],//背景色設定
        className: `section`//クラス名の指定
    });
};

ScrollTrigger.create({
    trigger: container,// トリガー位置指定
    start: "top top",// 処理スタート位置設定
    end: "bottom bottom",// 処理終了位置設定
    onUpdate: (self) => {// スクロールする度に呼び出し
        let progress = self.progress.toFixed(2);// 小数第二位まで有効に
        if (progress >= 0.9 && self.direction === 1) {
            createSection(panelNum++);
            ScrollTrigger.refresh();// 位置の再計算
        }
    },
});