<p>DrawSVGPlugin Values</p>

<svg version="1.1"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	 width="300" viewBox="0 0 516.3 190" style="enable-background:new 0 0 516.3 211.99;"
	 xml:space="preserve">
  <path id="template" d="M9.13,99.99c0,0,18.53-41.58,49.91-65.11c30-22.5,65.81-24.88,77.39-24.88c33.87,0,57.55,11.71,77.05,28.47c23.09,19.85,40.33,46.79,61.71,69.77c24.09,25.89,53.44,46.75,102.37,46.75c22.23,0,40.62-2.83,55.84-7.43c27.97-8.45,44.21-22.88,54.78-36.7c14.35-18.75,16.43-36.37,16.43-36.37"/>
	<path id="path" d="M9.13,99.99c0,0,18.53-41.58,49.91-65.11c30-22.5,65.81-24.88,77.39-24.88c33.87,0,57.55,11.71,77.05,28.47c23.09,19.85,40.33,46.79,61.71,69.77c24.09,25.89,53.44,46.75,102.37,46.75c22.23,0,40.62-2.83,55.84-7.43c27.97-8.45,44.21-22.88,54.78-36.7c14.35-18.75,16.43-36.37,16.43-36.37"/>
</svg>

<div id="code">drawSVG:<div id="current">"100%"</div></div>
<button id="next" class="dark-grey-button club-demo-button" style="display:block; margin-bottom:20px;">Next Example</button>

body {
  background-color: black;
  color: #ccc;
  text-align: center;
}

p {
  font-family: Arial, sans-serif;
}

#template, #path {
  fill: none;
}
#template {
  stroke-width: 5px;
  stroke: #444;
}
#path {
  stroke: #88CE02;
  stroke-width: 20px;
  visibility: hidden;
}
#code, #value {
  font-size: 20px;
  font-family: monospace;
}
#code {
  color: #777;
  margin: 20px;
  position: relative;
  visibility:hidden;
}
#current {
  display: inline-block;
  color: white;
}
#description {
  max-width: 530px;
  color: #777;
  font-family: Arial, sans-serif;
  font-size: 24px;
  display: inline-block;
  text-align: left;
}

gsap.registerPlugin(DrawSVGPlugin);

var values = "100%;40% 60%;20 350;50% 50%;true;10%".split(";"),
    currentIndex = 0;

//set the initial value
gsap.set("#path", {visibility:"visible"});
gsap.set("#code", {visibility:"visible"});

function next() {
  
  gsap.killTweensOf(next); //in case the user clicks, clear any delayed calls to this method. 
  if (++currentIndex === values.length) {
    currentIndex = 0;
  }
  if (values[currentIndex] === "true") {
    gsap.set("#current", {innerText:(values[currentIndex]), ease:"none"});
  } else {
  	gsap.set("#current", {innerText:('"' + values[currentIndex] + '"'), ease:"none"});
  }
  gsap.to("#path", {duration: 1, drawSVG:values[currentIndex], ease:"power1.inOut"});
  
}


$("#next").click(next);