Question

The code I’ve pasted below works fine for drawing a line step by step with a timed interval defined. (it uses a few variables not shown here). The problem I’m having is that if I remove the path object myPath1 or 2 with remove() function in raphael it doesn’t want to draw the next one, or redraw itself. It seems to sort of break the path method.

How should I do this? I want to be able to redraw/reanimate the path, but that requires it to start over at point zero, so I thought I may as well remove it.

var strokes1 = [ { stroke: "M "+second_start_circle+" 20", time: 0},
            { stroke: "l-70 70", time: 200},
            { stroke: "l800 0", time: 400}];

var drawnPath1 = strokes1[0].stroke;
var myPath1 = paper.path(drawnPath1);
myPath1.toBack();
var section1 = 1;
myPath1.attr({
    "stroke-width": 8,
    "stroke": color_services,
    "stroke-opacity": 1
});

function animatePath1() {
    if (section1 < strokes1.length) {
        drawnPath1 += strokes1[section1].stroke;
        myPath1.animate({
            path: drawnPath1
        }, strokes1[section1].time, animatePath1);
        section1++;
    }
}

var strokes2 = [ { stroke: "M "+third_start_circle+" 20", time: 0},
            { stroke: "l-70 70", time: 200},
            { stroke: "l500 0", time: 400}];

var drawnPath2 = strokes2[0].stroke;
var myPath2 = paper.path(drawnPath2);
myPath2.toBack();
var section2 = 1;
myPath2.attr({
    "stroke-width": 8,
    "stroke": color_about,
    "stroke-opacity": 1
});

function animatePath2() {
    if (section2 < strokes2.length) {
        drawnPath2 += strokes2[section2].stroke;
        myPath2.animate({
            path: drawnPath2
        }, strokes2[section2].time, animatePath2);
        section2++;
    }
}

Answer 1

I changed it into having a remove function. Will have to optimize this code a bit (self learned coder as I’m sure you can see). But now it works like intended.

var strokes1 = [ { stroke: "M "+second_start_circle+" 20", time: 0},
                { stroke: "l-70 70", time: 200},
                { stroke: "l800 0", time: 400}];

    var drawnPath1 = strokes1[0].stroke;
    var myPath1 = paper.path(drawnPath1);
    myPath1.toBack();
    var section1 = 1;       

    function animatePath1() {
        if (section1 < strokes1.length) {
            drawnPath1 += strokes1[section1].stroke;
            myPath1.attr({
                "stroke-width": 8,
                "stroke": color_services,
                "stroke-opacity": 1
            });
            myPath1.animate({
                path: drawnPath1
            }, strokes1[section1].time, animatePath1);
            section1++;
        }
    }
    function removePath1(){
        if (section1 == strokes1.length) {
            myPath1.remove();

        }
        section1 = 1;
        drawnPath1 = strokes1[0].stroke;
        myPath1 = paper.path(drawnPath1);
        myPath1.toBack();
    }