Svg Path Animation To Begin On Click Of A Button

I have an SVG path animation that at the moment is on an infinite loop. I'd like the animation to be invisible until it is triggered by a click event then once the animation is com

Solution 1:

a) empty the class .path but keep it there:

.path { }

b) add the animation properties you removed from the .path into a new css class with replacing 'infinite' from the animation property to '1'.

.path-animation {
     stroke-dasharray:1000;stroke-dashoffset:1000;animation:dash5slinear1;
}

c) Use the following jquery to achieve the results you require:

$("#button").click(function() {
   $('.path').attr('class', 'path path-animation');
   //5 secs delay to complete the animation before removing it and disabling the button.setTimeout(function() {
      $('.path').attr('class', 'path');
      $("#button").attr("disabled","disabled");
   }, 5000);
});

Sample Code: http://codepen.io/Nasir_T/pen/yVNxQG

Solution 2:

https://jsfiddle.net/krishna9960/atg5m6ym/7723/

Check this .. It should help...

For disabling button u can use this code

$("#button").click(function() {
          $('.path').css("animation"," dash 5s linear");
          $(this).attr("disabled","disabled");
         });

Solution 3:

You need to do these small changes to your code:

1) Firstly remove the already existing <path class="path" from your first <path> element. You want the button to add this later onclick

2) Change your animation iteration count from your animation: dash 5s linear infinite; - The 'infinite' here says iterate the animation infinite times. Change that to animation: dash 5s linear 1;

.path {
  stroke-dasharray:1000;stroke-dashoffset:1000;animation:dash5slinear1;
}

3) Then to disable the button after first click, you could

$('#button').on('click', function() {
  $('.dashed').addClass('path');
  $(this).prop('disabled', true);
});

Simple .. Let me know if you face any issues.