横向滚动画廊

向下滚动：区块被 pin 住，竖向滚轮被映射成轨道的 x 负向移动。这是作品集站点的标准手法。

01 封面

02 过程

03 细节

04 收尾

滚完横滑后，页面继续向下走。

公式

const track = document.querySelector("#track");
const amount = track.scrollWidth - window.innerWidth;

gsap.to(track, {
  x: () => -amount,          // 函数：刷新时按新宽度重算
  ease: "none",
  scrollTrigger: {
    trigger: "#pinWrap",
    start: "top top",
    end: () => "+=" + amount, // 竖向要滚的距离 = 横向溢出
    pin: true,
    scrub: 1,
    invalidateOnRefresh: true
  }
});