Next.js（React 18）环境中gsap.from()方法无法正常工作的问题

1. 修复变量名笔误 #

你创建的时间线变量是tl，但后续调用动画时用了timeline.from()，这会导致动画根本没绑定到带ScrollTrigger的时间线，自然不会触发。修正代码：

if (refs.current.length > 0) {
  tl.from(refs.current, {
    yPercent: 140,
    stagger: 0.1,
  });
}

2. 修正refs收集逻辑 #

每次组件渲染时refs.current = []会强制清空数组，可能导致部分元素还没被收集就丢失。移除这行代码，让useRef初始化空数组即可：

const refs = useRef([]);
// 删掉 refs.current = []; 这一行

3. 解决页面闪显问题 #

GSAP.from()是从动画起始状态过渡到元素默认样式，页面加载时元素会先显示默认状态再跳转到动画起点，导致闪显。可以用两种方式处理：

• 方式一：提前设置CSS初始状态
  给目标元素添加和动画起始状态一致的CSS：

  .animated-item {
    transform: translateY(140%);
    opacity: 0;
  }
  

  然后在动画中恢复默认样式：

  tl.from(refs.current, {
    yPercent: 140,
    opacity: 0,
    stagger: 0.1,
  });
  

• 方式二：用GSAP的autoAlpha属性
  启用autoAlpha并关闭immediateRender，让GSAP在DOM渲染前就设置好初始状态：

  tl.from(refs.current, {
    yPercent: 140,
    autoAlpha: 0,
    stagger: 0.1,
    immediateRender: false
  });
  

4. 调试ScrollTrigger触发范围 #

如果动画还是不触发，可开启调试标记确认ScrollTrigger的触发位置是否符合预期：

scrollTrigger: {
  trigger: middleRef.current,
  start: "top 20%", 
  end: "bottom+=20% center",
  markers: true // 显示触发范围标记，方便调试
}

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