如何解决Greensock动画结束后页面区块重新加载的问题

核心问题 #

• 你创建了三个独立的ScrollTrigger实例，它们在控制同一区块的滚动、固定和动画时互相冲突，导致动画结束后区块跳回原位。
• 第一个时间线的滚动范围（end: +=500）与固定实例的结束条件（endTrigger + end: top+=90）不匹配，ScrollTrigger无法正确判断固定状态的结束时机。
• 第三个实例中window.scrollTo()手动修改滚动位置，直接干扰了ScrollTrigger的内部滚动同步机制，引发异常滚动。
• 动画duration: 150设置完全不合理：scrub模式下，动画进度与滚动距离绑定，过大的时长会导致动画与滚动节奏严重脱节。

修正后的代码 #

gsap.registerPlugin(ScrollTrigger);

// 初始化图片初始位置
gsap.set(['#landing-hero-image-one', '#landing-hero-image-two', '#landing-hero-image-three'], { y: '200%' });

// 将固定、动画逻辑整合到同一个ScrollTrigger实例中
const tl = gsap.timeline({
  scrollTrigger: {
    trigger: '#landing-hero',
    start: 'top top',
    // 统一滚动触发范围：设置为完成动画所需的滚动距离
    end: '+=500',
    scrub: 0.1,
    // 直接在当前ScrollTrigger中启用固定，无需单独创建实例
    pin: true,
    // 保持页面布局稳定，避免滚动时出现跳动
    pinSpacing: true
  },
});

// 图片上移动画：scrub模式下无需设置duration，进度由滚动距离自动控制
tl.to(['#landing-hero-image-one', '#landing-hero-image-two', '#landing-hero-image-three'], {
  y: '-90%',
  ease: 'none' // 线性动画更贴合滚动scrub的平滑质感
});

关键修正点 #

1. 合并ScrollTrigger实例：将固定(pin)和动画逻辑统一到一个实例中，彻底消除多实例冲突。
2. 移除手动滚动干预：删掉window.scrollTo()代码，让ScrollTrigger自动处理滚动同步。
3. 合理设置动画参数：移除不合理的duration，scrub模式下动画进度完全由滚动距离驱动。
4. 统一触发范围：让固定状态的结束时机与动画完成时机保持一致，避免滚动异常。

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