-1

I have spent quite a bit of time going between snap.svg and jquery.svg trying to work out how to animate the following:

  1. An arrow that draws but leavs it's tail trail behind it
  2. Arrow has 90 degree bends but is on a curve

So I got the path animation worked out, well for a circle and line with a bend in it so far. But the arrow that moves and leaves the trail behind it is prooving problematic (tail is thinner than arrow head). jQuery SVG allows me to not clear the canvas so to speak and thus I can create the trail however it's Snap.animate I have worked out to use for animating along a path.

So question is out to the world.

Q1. Which is best to use? snap.svg or jquery.svg

Q2. Any ideas on how to achieve my animation would be much appreciated.

Thanks

Darcey

Darcey
  • 1,949
  • 1
  • 13
  • 22
  • You can't really say which is best to use. I personally would post the code you have on a jsfiddle with what you have so far. If you need support for older browsers you may want to steer away from Snap though (but could look at Raphael). – Ian Jun 09 '14 at 16:49

1 Answers1

0

For me the solution was:

snap.svg

I checked out many solutions for path animation etc but found that:

  1. Animation of a dashes line for a path worked for line reveal
  2. Animation along the path for arrow head

Taking path data from SVG files and placing them into variables in javascript made things easier as animation wouldn't work on loaded svg, im sure there is a simple fix / solution for that but the js var data worked. so I went with it.

D

Darcey
  • 1,949
  • 1
  • 13
  • 22