Display Animated SVG Elements Sequentially

Question

I have a site with an image of simple vector map, and I'm trying to draw lines on it that show up as the viewer one after another.

I've gotten this far;

http://codepen.io/anon/pen/aEFDw

But I can't figure out how to show the lines one by one.

Btw, I'm also struggling to use superscrollorama.

I'd appreciate any leads!

Answer 1

You can use SMIL to animate your SVG. Inorder to get a "chained" effect set the

begin="0s" <!-- last animation End time -->

on each element after the previous element animation https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL