用Vivus.js和GSAP动画最初隐藏的元素

Question

因此，我有这个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();

Answer 1

我不太熟悉Vivus，但是GSAP有一个工具(DrawSVGPlugin)，它可以做与俱乐部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});

如果您还有其他问题，我鼓励您查看https://greensock.com/forums/的GSAP论坛。这是一个非常棒的社区(不是说Stack溢出不是--只是GreenSock论坛完全致力于解决与GSAP相关的问题)。动画快乐！