响应式布局中GSAP滚动动画无法适配窗口尺寸，该如何解决？

GSAP配合ScrollTrigger实现的滚动动画出现窗口缩放后错位，核心原因是动画的触发阈值、进度映射参数都是页面初次加载时基于当时的布局尺寸计算的，窗口大小变化后布局元素的位置、尺寸发生了改变，但缓存的旧计算值没有同步更新，就会出现动画效果和布局错位的问题。
可按以下步骤实现响应式适配：

• 动态计算ScrollTrigger的触发边界，不要在start、end配置项中写死固定像素值或者固定比例值，改用函数返回实时计算的数值，保证每次参数计算时取的都是当前窗口、当前元素的最新尺寸，示例配置如下：

const pcAnimation = gsap.to(".pc-image", {
  x: 500, // 这里的动画目标值如果和布局尺寸相关也可以改用函数动态返回
  duration: 1
});

ScrollTrigger.create({
  trigger: ".animation-section",
  // 动态计算起始触发位置：触发元素顶部进入视口80%位置时开始动画
  start: () => `top ${window.innerHeight * 0.8}`,
  // 动态计算结束触发位置：触发元素底部离开视口20%位置时结束动画
  end: () => `bottom ${window.innerHeight * 0.2}`,
  animation: pcAnimation,
  scrub: 1
});

• 监听窗口尺寸变化事件，主动触发ScrollTrigger的全局刷新，可添加节流逻辑避免频繁刷新导致性能损耗：

let refreshTimer = null;
window.addEventListener("resize", () => {
  clearTimeout(refreshTimer);
  refreshTimer = setTimeout(() => {
    // 强制所有ScrollTrigger实例重新计算触发边界和动画参数
    ScrollTrigger.refresh();
  }, 120);
});

• 额外优化：GSAP 3.0以上版本可开启ScrollTrigger全局自动刷新配置，大部分常规场景下框架会自动检测尺寸变化完成参数更新：

ScrollTrigger.config({
  autoRefresh: true,
  // 可配置忽略的元素尺寸变化类型，按需调整即可
  ignoreMobileResize: true
});

你提到的调整start和end属性为动态方法后问题解决，正是因为改为函数返回值后，每次ScrollTrigger刷新参数时都会重新获取当前适配后的边界值，不再使用首次加载时的固定缓存值，自然就能适配不同窗口尺寸下的布局。

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