使用Vivus.js与GSAP实现初始隐藏元素动画时SVG提前显示的问题

我帮你梳理下问题的核心和对应的解决思路，你遇到的情况主要是SVG初始状态没隐藏、动画逻辑没同步这两个关键点没处理好：

1. 先给SVG设置初始隐藏状态 #

这是最容易遗漏的基础步骤——如果SVG在页面加载时就默认可见，那Vivus启动绘制前它自然会提前显示出来。建议用CSS直接设置初始状态（用visibility而不是display，因为Vivus需要元素存在才能操作路径）：

.graphic1 {
  visibility: hidden;
  opacity: 0;
}

2. 修正代码里的变量错误 #

看你的代码，introFadeIn函数里定义的变量是graphic1，但动画里用的是graphic1Elem，这会导致淡入动画根本没作用到SVG上，等于白写了！得把变量名统一：

function introFadeIn() {
  var graphic1 = $(".graphic1");
  tlIntrofadeIn = new TimelineLite({ onComplete: gr1Animate });
  tlIntrofadeIn.from(graphic1, 1, { autoAlpha: 0 }); // 这里改成graphic1
}

3. 让Vivus绘制和GSAP淡入同步执行 #

你现在的逻辑是「淡入完成→启动绘制」，但想要的是「绘制同时淡入」，所以不需要把Vivus放在onComplete里，而是让两个动画并行启动。调整后可以实现同步效果：

function introFadeIn() {
  var graphic1 = $(".graphic1");
  tlIntrofadeIn = new TimelineLite();
  
  // 先把SVG设为可见（保证Vivus能操作），同时启动淡入动画
  tlIntrofadeIn.set(graphic1, { visibility: "visible" })
               .from(graphic1, 1, { autoAlpha: 0 });
  
  // 同步启动Vivus绘制，调整duration和淡入时长匹配
  new Vivus("gr1", {
    type: "delayed",
    duration: 100 // 这个值单位是帧，100大约对应1秒，和你的淡入时间对齐
  });
}

4. 简化Vivus的回调设置 #

之前Vivus回调里的visibility设置已经没必要了（我们通过GSAP的set已经处理了），去掉后代码更简洁，也避免冲突。

完整调整后的代码示例 #

function initialAnimation() { 
  var introText = $(".text-intro");
  tlIntro = new TimelineLite({ onComplete: introFadeIn }); 
  tlIntro.from(introText, 1, { autoAlpha: 0 }); 
} 

function introFadeIn() {
  var graphic1 = $(".graphic1");
  tlIntrofadeIn = new TimelineLite();
  
  // 显示SVG并启动淡入
  tlIntrofadeIn.set(graphic1, { visibility: "visible" })
               .from(graphic1, 1, { autoAlpha: 0 });
  
  // 同步启动SVG绘制动画
  new Vivus("gr1", {
    type: "delayed",
    duration: 100
  });
}

initialAnimation();

搭配CSS初始隐藏：

.graphic1 {
  visibility: hidden;
  opacity: 0;
}

这样调整后，SVG会在文本淡入完成后，同时开始淡入和绘制动画，完全符合你的预期效果。

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