Drawsvg - Problem with callback calls multiple times

Question

I have to tried to animate svg using the jquery plugin Draw SVG. https://github.com/lcdsantos/jquery-drawsvg

In my html page I have 2 SVGs. I have to animate each SVG one after another only once.

// svg 2 initialization
let svg2 = $('.outer_svg2').drawsvg({
    duration: 800
})

// svg 1 initialization
let svg1 = $('.outer_svg').drawsvg({
    duration: 2000,
    callback: function(){
        // Animating svg 2
        svg2.drawsvg('animate'); 
    }
});
// Animating svg 1
svg1.drawsvg('animate');

I have to do the animation of second svg after completing the animation of first svg.

But, my problem is, when I run this code, the first SVG animation run correctly and second SVG animation is running repeatedly. I have to run the first second SVG animation only once.

Below is the current solution I found

setTimeout(function () {
     svg2.drawsvg('animate'); // second animation call
}, 2000); // Duration of first animation

Any help will be appreciated! Thank you

Answer 1

I am also having issue on something like this, I want to make infinite loop on every animated svg, But callback is only taking last element of foreach lope.

There is how i have done it now. (I posted It here , i think it might be helpfull to other who is looking solution for the same issue as mine) :)

var svgs = [];
$('.animated__svg').each((index,element) => {
    var svg = $(element).drawsvg({
        duration: 2000,
    });
    svgs.push(svg);
});

animateSvg();
function animateSvg(){
    $.each(svgs,(index,element) => {
        element.drawsvg('animate');
    });
    setTimeout(function(){ animateSvg();}, 2000);
}