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 All Shape Types.

A Pen by James Deagle on CodePen.

License.

index.html

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="specticles" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="47px" height="47px" viewBox="0 0 47 47" enable-background="new 0 0 47 47" xml:space="preserve">
<path id="frameRight" class="frame" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M41,21.5h6"/>
<path id="frameLeft" class="frame" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M0,21.5h6"/>
<path id="bridge" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M20.7,19c0,0,2.7-3,5.4,0"/>
<path id="lenseRight_1_" class="lense" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M13.5,29C9.4,29,6,25.6,6,21.5
	c0-4.1,3.3-7.5,7.5-7.5c4.1,0,7.5,3.3,7.5,7.5C20.9,25.6,17.6,29,13.5,29z"/>
<path id="lenseRight_2_" class="lense" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M33.6,29c-4.1,0-7.5-3.3-7.5-7.5
	c0-4.1,3.3-7.5,7.5-7.5s7.5,3.3,7.5,7.5C41,25.6,37.7,29,33.6,29z"/>
</svg>

script.js

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

tl.staggerFromTo(shapes, 1, {drawSVG:"100%"}, {drawSVG:"50% 50%"}, 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();
});
*/
var specticles = $("#specticles"),
    bridge = $("#bridge"),
    lenses = $(".lense"),
    frameLeft = $("#frameLeft"),
    frameRight = $("#frameRight"),
	  tl = new TimelineMax();

//specticlesTL.staggerFromTo(lenses, 1, {drawSVG:"50% 50%"}, {drawSVG:"100%"}, 0);
tl.from(bridge, 0.5, {drawSVG: "50% 50%", ease:Sine.easeInOut})
  .from(lenses, 0.5, {drawSVG: "50% 50%", ease:Sine.easeInOut}, 0.5)
  .from(frameLeft, 0.5, {drawSVG: "100% 100%", ease:Sine.easeInOut}, 0.75)
  .from(frameRight, 0.5, {drawSVG: "0% 0%", ease:Sine.easeInOut}, 0.75);

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;
}