Search code examples
javascriptsvgparallaxsuperscrollorama

Display Animated SVG Elements Sequentially


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!


Solution

  • 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