Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="container">
  <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="150px" height="150px" viewBox="0 0 150 150" xml:space="preserve">
  <g transform="scale(1)">
	  <g stroke-linejoin="round" stroke-linecap="round" >
                      
      <path id="crossleg-fill"
            fill="#C5CFD9"
            opacity="0"
            d="M40.4236337,119.256779 L28.0760649,96.3681693 C27.2252597,94.7279039 27.2115,94.181531 27.2115,92.9999208 C27.2115,92.9999208 27.6760254,95.9907226 29.2795411,97.0654297 C30.8830568,98.1401367 33.4147948,98.2968139 33.4147948,98.2968139 L51.0586991,98.296814 L89.9836115,98.296814 L57.6639059,118.318256 C56.0884256,119.249326 50.09667,122.65312 45.8930959,122.65312 C43.1835908,122.65312 41.7755197,121.630893 40.4236337,119.256779 Z">
      </path>
      <path id="shortleg-fill"
            fill="#C5CFD9"
            opacity="0"
            d="M34.2908416,98.2962407 C29.2209827,98.2962407 27.2115,95.6446408 27.2115,92.9993475 C27.2115,91.3258297 27.7498464,90.4125327 28.4945877,88.5526862 L52.9563846,30.1561445 C52.9563846,30.1561445 54.0405253,27.5534668 57.0739744,27.5534668 C60.1074236,27.5534668 61.5207537,30.5895996 61.5207537,30.5895996 L70.6191928,52.0603658 L51.0764719,98.2962407 L34.2908416,98.2962407 Z">
      </path>
      <path id="longleg-fill"
            fill="#C5CFD9"
            opacity="0"
            d="M100.36355,122.64968 L61.7522429,31.2431571 C61.087193,29.6865963 60.0208199,27.6788336 57.2608628,27.6788336 C54.7950182,27.6788336 53.6202878,28.8730568 52.9563846,30.1561445 C53.2992293,29.2308078 54.3375098,27.4328798 57.3462873,27.4328798 L83.9947224,27.4328798 C86.4508205,27.4328798 87.6284175,28.87879 88.1656173,30.2025833 L127.2115,122.649107 L100.36355,122.64968 Z">
      </path>
      <path id="longleg-left"
            stroke="#9CAAB8"
            fill="none"
            opacity="0"
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M52.9563846,30.1561445 C53.6202878,28.8730568 54.7950182,27.6788336 57.2608628,27.6788336 C60.0208199,27.6788336 61.087193,29.6865963 61.7522429,31.2431571 L100.36355,122.64968 L142.806398,122.649682">
      </path>
      <path id="shortleg"
            stroke="#9CAAB8"
            opacity="0"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="none"
            d="M28.4945877,88.5526862 C27.7498464,90.4125327 27.2115,91.3258297 27.2115,92.9993475 C27.2115,95.6446408 29.2209827,98.2962407 34.2908416,98.2962407 L51.0764719,98.2962407 L76.3110369,38.8161621">
      </path>
      <path id="contour"
            stroke="#9CAAB8"
            opacity="0"
            stroke-linecap="round" 
            stroke-linejoin="round" 
            fill="none"
            d="M133.335577,137.325191 C133.335577,137.325191 123.7769,114.656356 111.990672,86.7047821 L88.1656173,30.2025833 C87.6289908,28.8793633 86.4508205,27.4328798 83.9947224,27.4328798 L57.3462873,27.4328798 C54.3375098,27.4328798 53.2998026,29.2313811 52.9569579,30.1561445 L28.4945877,88.5526862 C27.7504198,90.4125327 27.2115,91.3258297 27.2115,92.9993475 C27.2115,94.181531 27.2246863,94.7279039 28.0760649,96.3681693 L40.4230604,119.256779 C41.7749463,121.630893 43.1835908,122.65312 45.8930959,122.65312 C50.09667,122.65312 56.0884256,119.249899 57.6633326,118.317683 L89.9836115,98.2962407 L21.0764719,98.2962407">
      </path>
 
  </g>
  </g>
</svg>
</div>
<br>
<div id="debug">
  <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="https://greensock.com/_img/codepen/allDevicesBanner/replay.png" width="19" height="19" style="margin-left:2px; vertical-align: middle;" /></div>
</div>
              
            
!

CSS

              
                /**/
body {
  background-color:#F4F5F6;
  color: #777;
  width="100%";
  height="100%";
}

#debug {
   display: none; 
}

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

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


              
            
!

JS

              
                var shapes_fill = $("#longleg-fill, #shortleg-fill, #crossleg-fill"),
    shapes_all = $("#longleg-fill, #longleg-left, #longleg-right, #shortleg, #crossleg"),
    shapes_stroke = $("#longleg-right, #longleg-left, #shortleg, #crossleg"),
		tl = new TimelineMax({onUpdate:updateSlider, repeat:-1}),
    $slider = $("#slider");

var container = document.getElementById('container');
TweenMax.set(container, {
  position:'absolute',
  left:'50%',
  xPercent:-50,
  top:'50%',
  yPercent:-50
})

tl.fromTo("#contour",       1.5,  {opacity:"0"},  {opacity:"1", ease:Sine.easeIn}, 1)
  .fromTo("#contour",       3.5,  {drawSVG:"0%"}, {drawSVG:"4.5% 92%", ease:Expo.easeInOut}, 1)
  .fromTo("#longleg-left",  0.3,  {opacity:"0"},  {opacity:"1", ease:Expo.easeIn}, 2.5)
  .fromTo("#longleg-left",  2.1,  {drawSVG:"0%"}, {drawSVG:"89%", ease:Expo.easeIn}, 1.6)
  .fromTo("#shortleg",      0.1,  {opacity:"0"},  {opacity:"1", ease:Expo.easeIn}, 2.8)
  .fromTo("#shortleg",      1.2,  {drawSVG:"0%"}, {drawSVG:"84%", ease:Expo.easeInOut}, 2.9)
//   // fills fade in
  .fromTo("#crossleg-fill",  1.0, {opacity:"0"},  {opacity:"1", ease:Quart.easeOut}, 3.5)
  .fromTo("#shortleg-fill", 1.0,  {opacity:"0"},  {opacity:"1", ease:Quart.easeOut}, 3.55)
  .fromTo("#longleg-fill", 1.0,   {opacity:"0"},  {opacity:"1", ease:Quart.easeOut}, 3.6)
  
//   // fills fade out
  .to("#longleg-fill", 3.4,       {opacity:"0", ease:Quart.easeOut}, 5)
  .to("#shortleg-fill", 3.5,      {opacity:"0", ease:Quart.easeOut}, 5.1)
  .to("#crossleg-fill", 3.6,      {opacity:"0", ease:Quart.easeOut}, 5.2)
//   // fade out
  .to("#contour",  0.3,           {opacity:"0", ease:Quad.easeIn}, 6.5)
  .to("#contour",  0.9,           {drawSVG:"98% 100%", ease:Expo.easeInOut}, 6.1)

  .to("#shortleg",  0.3,          {opacity:"0", ease:Quad.easeIn}, 6.5)
  .to("#shortleg",  0.9,          {drawSVG:"95% 100%", ease:Expo.easeInOut}, 6.2)

  .to("#longleg-left",  0.3,      {opacity:"0", ease:Quad.easeIn}, 6.5)
  .to("#longleg-left",  0.9,      {drawSVG:"98% 100%", ease:Expo.easeInOut}, 6.2)
  
  //.fromTo("#shortleg-fill, #shortleg", 0.3, {opacity:"1"}, {opacity:"0", ease:Quad.easeOut}, "-=0.25")
  //.fromTo("#crossleg-fill, #crossleg", 0.3, {opacity:"1"}, {opacity:"0", ease:Quad.easeOut}, '-=0.2')
 
  //.fromTo(shapes_stroke, 0.2, {opacity:"1"}, {opacity:"0", ease:Quad.easeIn}, "-=0.1")
  //.fromTo(shapes_all)

  
/* --- 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();
});


              
            
!
999px

Console