屏幕尺寸变化时如何更新GSAP ScrollTrigger的Pin高度计算？

你的问题核心是初始高度计算仅执行一次，窗口尺寸变化后DOM元素高度更新，但ScrollTrigger的配置参数没有同步更新。直接监听resize调用函数没用，是因为旧的ScrollTrigger实例仍在生效，需要先销毁旧实例，再重新计算高度并创建新的动画配置。

下面是修改后的完整方案：

步骤1：封装动画初始化逻辑并添加防抖 #

将计算高度、创建GSAP动画的逻辑封装成函数，同时添加防抖函数避免resize频繁触发导致性能问题。

修改后的JavaScript代码 #

// 保存ScrollTrigger实例，方便后续销毁
let scrollTriggerInstance;

// 防抖函数：限制函数执行频率
function debounce(func, delay = 200) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// 初始化/更新动画的核心函数
function initScrollAnimation() {
  // 销毁旧的ScrollTrigger实例
  if (scrollTriggerInstance) {
    scrollTriggerInstance.kill();
  }

  // 重新计算高度
  const rightDivHeight = document.getElementById('right').clientHeight;
  const leftDivHeight = document.getElementById('left').clientHeight;
  const travelDistance = rightDivHeight - leftDivHeight;
  console.log(`TravelDistance Calc: ${rightDivHeight}px - ${leftDivHeight}px = ${travelDistance}px`);

  // 创建新的GSAP动画和ScrollTrigger
  const animation = gsap.to("#left", {
    scrollTrigger: {
      trigger: "#left",
      start: "top center",
      end: `+=${travelDistance}`,
      pin: true,
      markers: true,
      pinSpacing: false,
    }
  });

  // 获取并保存新的ScrollTrigger实例
  scrollTriggerInstance = animation.scrollTrigger;
}

// 页面加载时初始化动画
window.addEventListener('load', initScrollAnimation);

// 监听窗口resize，使用防抖触发更新
window.addEventListener('resize', debounce(initScrollAnimation));

关键说明 #

1. 销毁旧实例：每次初始化前调用scrollTriggerInstance.kill()，清除之前的ScrollTrigger配置，避免新旧实例冲突。
2. 防抖函数：resize事件会在窗口调整过程中频繁触发，防抖函数确保只有在窗口停止调整后才执行动画更新，提升性能。
3. 重新计算高度：在每次初始化函数中重新获取DOM元素的高度，保证使用最新的尺寸计算travelDistance。
4. 保存实例引用：通过animation.scrollTrigger获取当前动画的ScrollTrigger实例，方便后续销毁操作。

额外优化建议 #

如果你的布局中元素高度可能因其他因素（如动态内容加载）变化，也可以直接调用initScrollAnimation()函数来更新动画。

内容的提问来源于stack exchange，提问作者N_G