Jump to content


  • Posts

  • Joined

  • Last visited

CodeGuy's Achievements



  1. Thanks @PointC for the code, it does what I was after, like what I see. Could you please provide an example of what do you mean by"creating the timeline(s) once"? The way I understand is ..to create a tween for each path instead in function and the on click buttons play the individual tween to the path? I have multiple paths that are going use some properties, stroke-with, colour etc, so I thought creating a tween inside a function and them pass the path name would be better?
  2. Hello, Project Background: 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. Thanks!