Snap SVG animation loop

Question

I'm trying to figure out, how to make the entire animation loops with snap SVG. I have 2 step animation with rectangles. For now I have ended up with something like this. Something funny is happening here. Firstly, the animation goes back instead of restarting, and it stops.

function firstStep() {
   setTimeout(function () {
     bigRectangle.animate({width:250}, 3000);
     mainFooter.animate({width:250}, 3000);
     leftSidebar.animate({width:40, fill:"#22313F"}, 3000);
     rightSidebar.animate({x:460, width:40, fill:"#22313F"}, 3000);
     mainContent.animate({x:300, width:150}, 3000);
   }, 2000);
   secondStep();
}

function secondStep() {
   setTimeout(function () {
   bigRectangle.animate({width:180}, 2500);
   mainFooter.animate({width:180, y:640}, 2500);
   leftSidebar.animate({width:180, height:50}, 2500);
   rightSidebar.animate({ width:180, height:50, y:580, x:250}, 2500);
   mainContent.animate({x:250, y:170, width:180}, 2500);
   }, 6000);
}

function loopRect(){
   setInterval(firstStep, 8000);
}

loopRect();

Answer 1

I can see two problems:

setInterval(firstStep, 3000);

This interval doesn't leave enough time for the animation to finish before it starts again.

Also, if you want the animation to restart, you'll have to put everything back where it was. This will require a third step to your animation:

setTimeout(function () {
bigRectangle.animate({width: 400}, 2500);
mainFooter.animate({width: 400,y: 520}, 2500);
leftSidebar.animate({width: 70,height: 400,fill: "#19B5FE"}, 2500);
rightSidebar.animate({width: 70,height: 400,y: 110,x: 580,fill: "#19B5FE"}, 2500);
mainContent.animate({x: 330,y: 110,width: 240}, 2500);
}, 10000);

Actually, there is no reason why you can't put all the animation code in a single function. Here's an updated jsfiddle.