使用 Vivus.js 和 GSAP 对最初隐藏的元素进行动画处理答案

【问题标题】：Animate initially hidden element with Vivus.js and GSAP使用 Vivus.js 和 GSAP 对最初隐藏的元素进行动画处理
【发布时间】：2018-05-18 12:37:54
【问题描述】：

所以我有这个 GSAP 时间线，它应该首先为淡入文本设置动画，然后 onComplete 它应该触发它所做的 Vivus.js 构造函数。但是，SVG 元素在动画发生之前是可见的，这不是预期的效果。我试图以某种方式操纵它，但问题仍然存在 - 我会错过什么..？

想要的效果是在绘制时淡入..

这是一支笔：https://codepen.io/anon/pen/ELGawo

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

// Fade in and draw elements
function introFadeIn() {
  var graphic1 = $(".graphic1");

  tlIntrofadeIn = new TimelineLite({ onComplete: gr1Animate });
  tlIntrofadeIn
    .from(graphic1Elem, 1, { autoAlpha: 0 });
}

function gr1Animate() {
  new Vivus(
    "gr1",
    {
      type: "delayed",
      onReady: function(myVivus) {
        myVivus.el.style.visibility = "inherit";
      }
    },
    function(obj) {
      obj.el.style.visibility = "visible";
    }
  );
}

initialAnimation();

【问题讨论】：

标签： javascript jquery animation gsap vivus

【解决方案1】：

我对 Vivus 不熟悉，但 GSAP 有一个工具 (DrawSVGPlugin)，它可以做与 Club GreenSock 福利相同的事情（甚至更多），并且它可以无缝集成，因此可以压缩 30 多行代码到 3： https://codepen.io/GreenSock/pen/de8f2fa2a6813213d0e258113b2b15bd/?editors=0010

var introTL = new TimelineLite({delay:0.5});
introTL.from(".text-intro, #gr1 circle, #gr1 text", 1, {autoAlpha:0})
  .from("#gr1 path", 2, {drawSVG:"0%", autoAlpha:0});

如果您有任何其他问题，建议您查看 GSAP 论坛https://greensock.com/forums/。这是一个很棒的社区（不是 Stack Overflow 不是 - 只是 GreenSock 论坛完全致力于 GSAP 相关问题）。快乐的动画！

【讨论】：