All Shape Types

All-Shape-Types.markdown

All Shape Types

Shows how GreenSock's DrawSVGPlugin can animate the strokes on , , , and . It can also do and . Learn more at www.greensock.com/drawSVG

Forked from GreenSock's Pen SVG-Stroke Animation.

A Pen by Captain Anonymous on CodePen.

License.

index.html

<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	 x="0px" y="0px" width="570px" height="150px" viewBox="0 0 570 150" xml:space="preserve">
  
<circle fill="none" cx="71.5" cy="77.5" r="22.5" stroke="#88CE02" stroke-width="10"/>  

</svg>
<br>

<div id="slider"></div><div id="replay" style="position:relative; display:inline-block; text-align:right; cursor:pointer; color:#999999; font-family:Arial, Verdana, sans-serif; font-size:12px; bottom: 35px; margin-left: 24px;">replay <img id="replayIcon" src="http://greensock.com/_img/codepen/allDevicesBanner/replay.png" width="19" height="19" style="margin-left:2px; vertical-align: middle;" /></div>

script.js

var shapes = $("circle"),
		tl = new TimelineMax({onUpdate:updateSlider, repeat:1, yoyo:true}),
    $slider = $("#slider");

var circle = $('circle')
//.getTotalLength();
console.log(circle[0])

tl.staggerFromTo(shapes, 1, {transformOrigin:"50% 50%", rotation:-90, strokeDasharray: "140", strokeDashoffset:"0"}, {strokeDasharray: "140", strokeDashoffset:"-140"}, 0.1)
  //.fromTo(shapes, 0.1, {drawSVG:"0%"}, {drawSVG:"10%", immediateRender:false}, "+=0.1")
  //.staggerTo(shapes, 1, {drawSVG:"90% 100%"}, 0.5)
  //.to(shapes, 1, {rotation:360, scale:0.5, drawSVG:"100%", stroke:"white", strokeWidth:6, transformOrigin:"50% 50%"})
  //.staggerTo(shapes, 0.5, {stroke:"red", scale:1.5, opacity:0}, 0.2)

  
/* --- controls --- */

$slider.slider({
  range: false,
  min: 0,
  max: 100,
  step: 0.02,
  value:0,
  slide: function ( event, ui ) {
    tl.progress( ui.value / 100 ).pause();
  }
});
function updateSlider() {
	$slider.slider("value", tl.progress() * 100);
}
var $replayIcon = $("#replayIcon"),
    $replay = $("#replay").mouseenter(function(){
      TweenLite.to($replayIcon, 0.4, {rotation:"+=360"});
      TweenLite.to($replay, 0.4, {opacity:1});
    }).mouseleave(function(){
      TweenLite.to($replay, 0.4, {opacity:0.65});
    }).click(function(){
      tl.restart();
});

style.css

/**/
body {
  background-color:black;
  text-align:center;
  color: #777;
}

#slider {
  width:400px;
  margin:30px auto;
  background-color: #222;
  display: inline-block;
}

#slider, #slider a {
  background-image: none;
  border: 1px solid #555;
}
#slider a {
  background-color: #444;
}