<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="516.3px" height="190px" 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>
<!-- https://greensock.com/docs/v3/Plugins/DrawSVGPlugin -->
var values = "100%;40% 60%;20 350;50% 50%;true;10%".split(";"),
currentIndex = 0;
//set the initial value
gsap.set("#path, #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", {text:(values[currentIndex])});
} else {
gsap.set("#current", {text:('"' + values[currentIndex] + '"')});
}
gsap.to("#path", {drawSVG:values[currentIndex], duration: 1, ease:"power1.inOut"});
}
document.querySelector("#next").addEventListener("click", next);