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();// 位置の再計算
        }
    },
});