为什么ScrollTrigger在窗口调整大小时不更新动态计算的x轴偏移值？

问题核心原因 #

你定义的x轴目标值仅在时间线初始化时计算一次，浏览器窗口调整后视口宽度、元素相对位置发生变化，但ScrollTrigger默认会缓存动画的起始/目标值，不会重新执行计算逻辑，因此元素位置不会同步更新。

解决步骤 #

1. 给关联该时间线的ScrollTrigger配置添加invalidateOnRefresh: true属性
   该属性会让ScrollTrigger每次触发刷新（默认窗口resize时会自动触发刷新）时，清空之前缓存的动画参数，重新执行你写在x属性中的回调函数，获取最新的计算值。
   配置示例：

ScrollTrigger.create({
  animation: seoShowBenefitsTl,
  // 保留你原来的其他配置，比如trigger、start、end、scrub等
  invalidateOnRefresh: true // 新增这一行即可
})

2. 若你使用了matchMedia管理多端动画逻辑，确保断点切换时会重新初始化该时间线，避免旧的计算值残留。
3. 可选：如果你的页面有其他动态修改元素尺寸的逻辑，修改完成后手动调用ScrollTrigger.refresh()主动触发刷新即可。

你当前代码里x属性已经用函数返回动态计算值，配合上述配置就可以实现窗口大小调整后位置自动同步，不需要额外编写resize监听逻辑，ScrollTrigger内置的刷新机制已经做了防抖优化，性能优于自定义resize事件。

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