I am working on a SVG Map and using the paths to animate the path going from one point to another, ie a to b, b to c, c to a etc. The Paths are drawn successfully but I am unable to find a solution to stop the current animation and clear out any related properties, before the next path starts to draw.
Code Pen Demo:
I have two SVG paths that get drawn. Both paths have their buttons for animation to start, currently when I click on Path 1 button it starts to draw and then when I click on Path 2 and starts to draw as well and both running as the same time.
When Path 1 is clicked and the path is being drawn and I click on Path 2 button I would like the Path 1 animation to stop and the Path 2 starts. When I say completely stop, I mean completely I mean its set back to originally start before the button was clicked.
I put a Kill() button when stops the animation but leaves the path line drawn on the screen, and if I start the second path the first one restarts I might not be placing it correctly maybe?
When searching the forum, I have came across clear(), restart() but that did not work or I might not applied them correctly, to keep the code demo minimum I did not include those into demo.
Any help or suggestions are very much appreciated.