I'm using javascript to make svg text show up after the animation (vivus.js) is finished

Question

I'm now working a svg animation using Vivus.js.

It's a SVG line animation with some text description which is inside the text label of svg.

Because vivus.js can't deal with text animation, I simply make the text's opacity to 0 first, and after the svg line animation is finished, I make the text's opacity to 1 to make it visible.

here is the main part of my .js code put after having imported vivus.min.js in codepen:

// Making a svg line animation through Vivus.js, which works fine

var svg_product =
new Vivus('product', {
    type: 'scenario',
    duration: 100
});

// Make the <g id="text"> invisible before the animation is finished

var hidefirst = document.getElementById("text");
hidefirst.style.opacity = 0;

// Detect if the line animation is finished using strokeDashoffset

var line = document.getElementById("XMLID_202_");
var lineDetect = window.getComputedStyle(line).strokeDashoffset;

// After the line animation is finished, make <text> visible
// But the code seems doesn't work

if (lineDetect == "0px") {
    hidefirst.style.opacity = 1;
}

The last part of the code is my question.

I think the code doesn't work because the "if condition" I've written is evaluated at the very beginning the page loading, which is False.

Therefore my question is, how can I correctly trace the strokeDashoffset of the svg line, so I can make the text's opacity to 1 after the window.getComputedStyle(line).strokeDashoffset becomes to "0px"?

Thanks!

Answer 1

You don't need to detect that the animation is finished, the Vivus constructor takes a third argument which is a function that is called at the end of the animation.

var svg_product =
  new Vivus('product', {
              type: 'scenario',
              duration: 100 },
            function() {
              // called after the animation completes
  })

you could use that or the play method e.g.

svg_product.play(function() {
  // called after the animation completes
})

All this is from the Vivus github documentation