Animate initially hidden element with Vivus.js and GSAP

Question

So I have this GSAP timeline, which should first animate the fade-in text, and onComplete it should trigger the Vivus.js constructor which it does. However, the SVG element is visible before the animation occurs which is not a desired effect. I have tried to manipulate it somehow but the issue is still here - what could I be missing..?

The desired effect would be to fade in while drawing itself..

Here's a pen: 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

I'm not familiar with Vivus, but GSAP has a tool (DrawSVGPlugin) that does the same thing (and much more) as a Club GreenSock benefit and it integrates seamlessly, so your 30-ish lines of code could be condensed to 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});

If you have any other questions, I'd encourage you to check out the GSAP forums at https://greensock.com/forums/ . It's a fantastic community (not that Stack Overflow isn't - it's just that the GreenSock forums are totally dedicated to GSAP-related questions). Happy animating!