React中GSAP驱动3D模型动画后文本初始状态异常问题

核心原因 #

你遇到的初始opacity异常，本质是GSAP Timeline的动画时序与初始状态未对齐：

1. 你的fromTo动画未指定起始时间，默认会跟在第一个to动画（0-0.3秒）之后启动——也就是从timeline的0.3秒位置才开始把文本的opacity设为1，再动画到0。
2. 页面顶部时scroll.offset为0，timeline处于0进度，此时fromTo的初始状态（opacity:1）还未被GSAP应用，文本保持默认状态（大概率是CSS默认或你之前设置的opacity:0）。
3. 当你滚动极小距离，timeline进度推进到接近0.3秒时，fromTo的起始状态才被触发，文本突然变为可见。

修复方案 #

要让文本初始就保持opacity:1，并在模型动画完成后开始淡出，需要调整timeline的动画时序和初始状态设置：

方案1：对齐fromTo与模型动画的结束时间

给fromTo添加时间参数，让它在第一个动画结束时（0.3秒）开始，同时确保动画逻辑匹配需求：

useLayoutEffect(() => {
    tl.current = gsap.timeline();
    // 模型动画：0-0.3秒执行位移
    tl.current.to(drawer_one.current.position, {
          duration: 0.3,
          y: -0.5,
        })
      // 文本淡出：从0.3秒开始，持续指定时长（比如0.2秒）
      .fromTo("#direct_work_link", 
        { opacity: 1 }, 
        { opacity: 0, duration: 0.2 }, 
        0.3); // 这里的0.3是起始时间，与模型动画结束点对齐
});

方案2：用gsap.set()强制初始化状态（更稳妥）

如果文本元素的CSS默认opacity不是1，先手动设置初始状态，避免GSAP启动前的状态不一致：

useLayoutEffect(() => {
    // 先强制设置文本初始可见
    gsap.set("#direct_work_link", { opacity: 1 });
    
    tl.current = gsap.timeline();
    tl.current.to(drawer_one.current.position, {
          duration: 0.3,
          y: -0.5,
        })
      // 直接用to动画代替fromTo，逻辑更简洁
      .to("#direct_work_link", { opacity: 0, duration: 0.2 }, 0.3);
});

额外注意点

• 检查CSS，确保#direct_work_link没有被默认设置opacity:0或被其他样式覆盖。
• 用gsap.set()设置初始状态是GSAP的最佳实践，能避免动画启动前的状态闪烁或不一致问题。

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