<div class="powered_by_pinecone">
  <span>powered by</span>
  <svg width="478" height="171" viewBox="0 0 478 171" xmlns="http://www.w3.org/2000/svg">
    <title>pinecone_gs</title>
    <g id="pinecone_gs" fill="#fff">
      <path d="M68 152.987c9.573 0 17.338-7.793 17.338-17.406H50.662c0 9.614 7.765 17.407 17.34 17.407z" id="cone9" />
      <path d="M85.34 126.127c9.572 0 17.336-7.793 17.336-17.406H68c0 9.614 7.765 17.407 17.34 17.407z" id="cone8" />
      <path d="M50.663 126.127c9.572 0 17.337-7.793 17.337-17.406H33.324c0 9.614 7.764 17.407 17.34 17.407z" id="cone7" />
      <path d="M85.338 81.86c0 9.614 7.764 17.407 17.34 17.407 9.572 0 17.337-7.793 17.337-17.408H85.338z" id="cone6" />
      <path d="M68 99.267c9.573 0 17.338-7.793 17.338-17.408H50.662c0 9.614 7.765 17.407 17.34 17.407z" id="cone5" />
      <path d="M33.325 99.267c9.573 0 17.337-7.793 17.337-17.408H15.986c0 9.614 7.764 17.407 17.34 17.407z" id="cone4" />
      <path d="M85.34 72.406c9.572 0 17.336-7.793 17.336-17.407H68c0 9.613 7.765 17.406 17.34 17.406z" id="cone3" />
      <path d="M50.663 72.406C60.235 72.406 68 64.613 68 55H33.324c0 9.613 7.764 17.406 17.34 17.406z" id="cone2" />
      <path d="M67.875 11.013c-10.15 10.193-10.15 26.718 0 36.91 10.148-10.192 10.15-26.717 0-36.91z" id="cone1top" />
      <path d="M146.44 69.497h7.2v5.44h.16c1.386-2.026 3.292-3.6 5.72-4.72 2.426-1.12 4.92-1.68 7.48-1.68 2.933 0 5.586.507 7.96 1.52 2.372 1.014 4.4 2.427 6.08 4.24 1.68 1.814 2.973 3.934 3.88 6.36.906 2.428 1.36 5.028 1.36 7.8 0 2.827-.454 5.454-1.36 7.88-.907 2.428-2.2 4.534-3.88 6.32-1.68 1.787-3.708 3.188-6.08 4.2-2.374 1.012-5.027 1.52-7.96 1.52-2.72 0-5.28-.573-7.68-1.72-2.4-1.146-4.24-2.706-5.52-4.68h-.16v28h-7.2v-60.48zm19.68 5.76c-1.92 0-3.654.334-5.2 1-1.547.667-2.854 1.574-3.92 2.72-1.067 1.147-1.894 2.534-2.48 4.16-.587 1.628-.88 3.4-.88 5.32 0 1.92.293 3.693.88 5.32.586 1.627 1.413 3.014 2.48 4.16 1.066 1.148 2.373 2.054 3.92 2.72 1.546.667 3.28 1 5.2 1 1.92 0 3.652-.333 5.2-1 1.546-.666 2.852-1.572 3.92-2.72 1.066-1.146 1.892-2.533 2.48-4.16.586-1.627.88-3.4.88-5.32 0-1.92-.294-3.692-.88-5.32-.588-1.626-1.414-3.013-2.48-4.16-1.068-1.146-2.374-2.053-3.92-2.72-1.548-.666-3.28-1-5.2-1z"
      id="type1" />
      <path d="M193.88 69.497h7.2v37.92h-7.2v-37.92z" id="type2" />
      <path d="M192.875 63.58c0-1.257.454-2.34 1.36-3.245.908-.908 1.99-1.36 3.244-1.36 1.255 0 2.336.452 3.244 1.36.906.906 1.36 1.988 1.36 3.244h-9.21z" id="type3" />
      <path d="M210.69 69.497h7.2v5.84h.158c.907-2.027 2.48-3.666 4.72-4.92 2.24-1.252 4.827-1.88 7.76-1.88 1.813 0 3.56.28 5.24.84 1.68.56 3.147 1.428 4.4 2.6 1.253 1.174 2.253 2.68 3 4.52.747 1.84 1.12 4.014 1.12 6.52v24.4h-7.2v-22.4c0-1.76-.24-3.266-.72-4.52-.48-1.252-1.12-2.266-1.92-3.04a7.253 7.253 0 0 0-2.76-1.68c-1.04-.346-2.12-.52-3.24-.52-1.493 0-2.88.24-4.16.72a8.66 8.66 0 0 0-3.36 2.28c-.96 1.04-1.707 2.36-2.24 3.96-.533 1.6-.8 3.494-.8 5.68v19.52h-7.2v-37.92z"
      id="type4" />
      <path d="M257.97 91.097c0 1.654.358 3.16 1.08 4.52.718 1.36 1.665 2.52 2.84 3.48 1.17.96 2.53 1.708 4.08 2.24 1.544.534 3.145.8 4.798.8 2.24 0 4.187-.52 5.84-1.56 1.654-1.04 3.173-2.413 4.56-4.12l5.44 4.16c-4 5.174-9.6 7.76-16.8 7.76-2.988 0-5.693-.508-8.12-1.52-2.426-1.012-4.48-2.413-6.16-4.2-1.68-1.786-2.973-3.892-3.88-6.32-.907-2.426-1.36-5.053-1.36-7.88 0-2.826.493-5.452 1.48-7.88.986-2.426 2.347-4.533 4.08-6.32 1.732-1.786 3.8-3.186 6.2-4.2 2.4-1.013 5.012-1.52 7.84-1.52 3.36 0 6.2.588 8.52 1.76 2.32 1.174 4.227 2.707 5.72 4.6a18.204 18.204 0 0 1 3.24 6.4c.667 2.374 1 4.788 1 7.24v2.56h-30.4zm22.717-5.76c-.052-1.6-.306-3.066-.76-4.4a9.693 9.693 0 0 0-2.038-3.48c-.91-.986-2.042-1.76-3.402-2.32-1.36-.56-2.947-.84-4.76-.84-1.76 0-3.373.334-4.84 1-1.468.667-2.706 1.534-3.72 2.6a12.004 12.004 0 0 0-2.36 3.56c-.56 1.308-.84 2.6-.84 3.88h22.72z"
      id="type5" />
      <path d="M323.328 79.577c-1.334-1.386-2.733-2.44-4.2-3.16-1.468-.72-3.214-1.08-5.24-1.08-1.974 0-3.694.36-5.16 1.08a10.517 10.517 0 0 0-3.68 2.96c-.988 1.254-1.733 2.694-2.24 4.32a16.985 16.985 0 0 0-.76 5.08c0 1.76.293 3.427.88 5 .587 1.574 1.413 2.948 2.48 4.12a11.402 11.402 0 0 0 3.84 2.76c1.492.667 3.173 1 5.04 1 2.027 0 3.76-.36 5.2-1.08 1.44-.72 2.773-1.772 4-3.16l5.12 5.12c-1.868 2.08-4.04 3.573-6.52 4.48-2.48.906-5.108 1.36-7.88 1.36-2.934 0-5.613-.48-8.04-1.44-2.428-.96-4.52-2.306-6.28-4.04-1.76-1.733-3.12-3.812-4.08-6.24-.96-2.427-1.44-5.106-1.44-8.04 0-2.932.48-5.626 1.44-8.08.96-2.452 2.306-4.56 4.04-6.32 1.733-1.76 3.812-3.132 6.24-4.12 2.427-.986 5.133-1.48 8.12-1.48 2.772 0 5.427.494 7.96 1.48a17.56 17.56 0 0 1 6.6 4.52l-5.44 4.96z"
      id="type6" />
      <path d="M330.77 88.457c0-2.772.518-5.36 1.558-7.76a20.237 20.237 0 0 1 4.28-6.32c1.813-1.812 3.947-3.24 6.4-4.28 2.453-1.04 5.093-1.56 7.92-1.56s5.467.52 7.92 1.56c2.453 1.04 4.587 2.468 6.4 4.28a20.254 20.254 0 0 1 4.28 6.32c1.04 2.4 1.56 4.988 1.56 7.76 0 2.773-.52 5.374-1.56 7.8-1.04 2.428-2.468 4.534-4.28 6.32-1.813 1.787-3.947 3.2-6.4 4.24-2.453 1.04-5.093 1.56-7.92 1.56s-5.467-.52-7.92-1.56c-2.453-1.04-4.587-2.453-6.4-4.24-1.813-1.786-3.24-3.892-4.28-6.32-1.04-2.426-1.56-5.027-1.56-7.8zm7.678 0c0 1.92.293 3.693.88 5.32.587 1.627 1.413 3.014 2.48 4.16 1.067 1.148 2.373 2.054 3.92 2.72 1.546.667 3.28 1 5.2 1 1.92 0 3.653-.333 5.2-1 1.547-.666 2.852-1.572 3.92-2.72 1.066-1.146 1.893-2.533 2.48-4.16.586-1.627.88-3.4.88-5.32 0-1.92-.294-3.692-.88-5.32-.587-1.626-1.414-3.013-2.48-4.16-1.068-1.146-2.373-2.053-3.92-2.72-1.547-.666-3.28-1-5.2-1-1.92 0-3.654.334-5.2 1-1.547.667-2.853 1.574-3.92 2.72-1.067 1.147-1.893 2.534-2.48 4.16-.587 1.628-.88 3.4-.88 5.32z"
      id="type7" />
      <path d="M377.09 69.497h7.2v5.84h.16c.905-2.027 2.48-3.666 4.72-4.92 2.24-1.252 4.825-1.88 7.76-1.88 1.81 0 3.56.28 5.24.84 1.68.56 3.145 1.428 4.4 2.6 1.25 1.174 2.25 2.68 3 4.52.745 1.84 1.118 4.014 1.118 6.52v24.4h-7.2v-22.4c0-1.76-.24-3.266-.72-4.52-.48-1.252-1.12-2.266-1.92-3.04a7.237 7.237 0 0 0-2.76-1.68c-1.04-.346-2.12-.52-3.24-.52-1.492 0-2.88.24-4.16.72-1.28.48-2.4 1.24-3.36 2.28-.96 1.04-1.707 2.36-2.24 3.96-.533 1.6-.8 3.494-.8 5.68v19.52h-7.2v-37.92z"
      id="type8" />
      <path d="M424.368 91.097c0 1.654.36 3.16 1.08 4.52.72 1.36 1.666 2.52 2.84 3.48 1.173.96 2.532 1.708 4.08 2.24 1.546.534 3.147.8 4.8.8 2.24 0 4.186-.52 5.84-1.56 1.653-1.04 3.173-2.413 4.56-4.12l5.44 4.16c-4 5.174-9.6 7.76-16.8 7.76-2.987 0-5.693-.508-8.12-1.52-2.427-1.012-4.48-2.413-6.16-4.2-1.68-1.786-2.974-3.892-3.88-6.32-.907-2.426-1.36-5.053-1.36-7.88 0-2.826.493-5.452 1.48-7.88.986-2.426 2.347-4.533 4.08-6.32 1.733-1.786 3.8-3.186 6.2-4.2 2.4-1.013 5.013-1.52 7.84-1.52 3.36 0 6.2.588 8.52 1.76 2.32 1.174 4.226 2.707 5.72 4.6a18.19 18.19 0 0 1 3.24 6.4c.667 2.374 1 4.788 1 7.24v2.56h-30.4zm22.72-5.76c-.054-1.6-.307-3.066-.76-4.4a9.696 9.696 0 0 0-2.04-3.48c-.907-.986-2.04-1.76-3.4-2.32-1.36-.56-2.948-.84-4.76-.84-1.76 0-3.373.334-4.84 1-1.468.667-2.707 1.534-3.72 2.6a12.046 12.046 0 0 0-2.36 3.56c-.56 1.308-.84 2.6-.84 3.88h22.72z"
      id="type9" />
      <path d="M346 99V79l13 10-13 10z" id="play" />
    </g>
  </svg>
</div>

body, 
html {
  height: 100%;
}

body {
  font-family: Helvetica, Arial, sanf-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(45deg, #00A8C5, #FFFF7E);
  color: white;
}

.powered_by_pinecone {
  text-align: center;
  $pinecone-logo-width: 478px;
  span {
    font-size: $pinecone-logo-width / 16;
    text-transform: uppercase;
    display: block;
    color: rgba(white, .6);
    margin-bottom: $pinecone-logo-width / -12; // let's pull the pinecone logo in a bit ;)
  }
  svg {
    width: $pinecone-logo-width;
    height: auto;
    cursor: pointer;
    overflow: visible;
  }
  span,
  svg,
  #play {
    visibility: hidden;
  }
}

var GSAP = function() {
  
  var pineconeTl = new TimelineLite(),
  pineconeLogo = $('.powered_by_pinecone svg'),
  pineconeEls = pineconeLogo.find('path[id*="cone"]'),
  pineconeType = pineconeLogo.find('path[id*="type"]'),
  pineconePlay = pineconeLogo.find('path[id="play"]'),
  pineconeSpan = $('.powered_by_pinecone span');
  
  TweenLite.set([pineconeLogo, pineconeSpan], {
    visibility: 'visible'
  });
  TweenLite.set(pineconeSpan, {
    x: 7
  });

  // timeline animations pines, type and "powered by"
  pineconeTl.timeScale(0.65);
  pineconeTl.staggerFrom(pineconeEls, 0.2, {
    transformOrigin: 'center',
    scale: 0,
    autoAlpha: 0,
    y: 150,
    ease: Back.easeOut.config(3)
  }, 0.05);
  pineconeTl.staggerFrom(pineconeType, 0.2, {
    transformOrigin: 'center',
    scale: 0,
    autoAlpha: 0,
    rotationX: -180,
    y: 150,
    ease: Back.easeOut.config(4)
  }, 0.05, '-=0.25');
  pineconeTl.from(pineconeSpan, 0.8, {
    autoAlpha: 0,
    y: 30,
    scaleY: 0,
    ease: Elastic.easeOut.config(1.5, 0.4)
  }, '-=0.45');

  pineconeLogo.on('mouseenter', function() {
    TweenLite.to(pineconePlay, 0.3, {
      transformOrigin: 'center',
      autoAlpha: 1,
      scale: 1,
      ease: Back.easeOut.config(3)
    });
    TweenLite.to([pineconeType, pineconeSpan, pineconeEls], 0.5, {
      opacity: 0.5
    });
    pineconeLogo.click(function() {
      TweenLite.set([pineconeType, pineconeSpan, pineconeEls], {
        opacity: 1
      });
      pineconeTl.restart();
      TweenLite.to(pineconePlay, 0.3, {
        transformOrigin: 'center',
        autoAlpha: 0,
        scale: 0
      });
    });
  });

  pineconeLogo.on('mouseleave', function() {
    TweenLite.to(pineconePlay, 0.3, {
      transformOrigin: 'center',
      autoAlpha: 0,
      scale: 0
    });
    TweenLite.to([pineconeType, pineconeSpan, pineconeEls], 0.3, {
      opacity: 1
    });
  });
};

$(document).on('ready', function() {
  GSAP();
});