2

I am looking to animate a path element inside an SVG using the Snap SVG library. I saw Snap has a few methods related to paths. Some include: Snap.path.getBBox(), Snap.path.getSubpath(), and Snap.path.map()

I was trying to wrap my head around how to animate the path so that it starts as not showing, and over time reveals more and more of the path.

My question is similar to this (but this question is not specific to Snap, although I assume the principal is similar): How can I animate a progressive drawing of svg path?

And here is a working demo so it is clear what I am looking to accomplish (end result): http://jsfiddle.net/lollero/THGuz/

I made a JSFiddle to play around with my particular path element: http://jsfiddle.net/xhdjbj1r/1/

Any help or guidance is appreciated.

Community
  • 1
  • 1
Alex
  • 5,298
  • 4
  • 29
  • 34
  • 1
    Maybe this will help http://svg.dabbles.info/snaptut-dasharray and http://svg.dabbles.info/snaptut-animateoffset which has more of a method that could just be incorporated. Basically the same method as Vasilys. – Ian Feb 22 '15 at 11:32

1 Answers1

3

I have a solution that shows some buggy behavior (blinking extra lines) in Chrome and Opera

var yourElement = s.select('path#test');
var pathLength = yourElement.getTotalLength();
yourElement.attr({
    'stroke-dasharray': '' + pathLength + ' 0'
});
Snap.animate(0, pathLength, function(t){
    yourElement.attr({'stroke-dasharray': '' + t + ' ' + (pathLength - t)});
}, 10000);

The idea is pretty simple - animate stroke's dasharray from zero to full length. I hope this could be a good step for a clean solution

Vasily Liaskovsky
  • 2,248
  • 1
  • 17
  • 32
  • Thanks! I hooked this up in my JSFiddle and it works great. Now, just on to some CBT (as you mentioned). – Alex Feb 22 '15 at 15:35