概要
縦スクロールに連動して画面を固定したまま横方向へスライドが流れる、ストーリー性のあるLP・作品紹介向けのセクション。
使用技術
・GSAP + ScrollTrigger（スクロール連動 / pin）
実装ポイント
・リスト全幅から画面幅を引いた `scrollWidth – clientWidth` を移動量とし、`pin: true` で区間を固定しながら `scrub` でスクロールに横移動を同期
・`invalidateOnRefresh` でリサイズ時に移動量を再計算し、レスポンシブでも破綻しない
・各スライド内の演出は `containerAnimation` を使い、横スクロール自体をトリガー基準にして画像のパララックス（scale 1.2→1.0）とテキスト出現を発火
・`onUpdate` で `self.progress` を取得し、下部プログレスバーの幅に反映
コアスニペット
const scrollAmount = list.scrollWidth - wrapper.clientWidth;
const horizontalTween = gsap.to(list, {
x: -scrollAmount,
ease: "none",
scrollTrigger: {
trigger: wrapper,
start: "center center",
end: () => `+=${scrollAmount}`,
pin: true,
scrub: 1,
invalidateOnRefresh: true,
},
});