GitLab Fox: Animated Logo

gitlab-fox-animated-logo.markdown

GitLab Fox: Animated Logo

GitLab's SVG logo animated w/GreenSock https://about.gitlab.com

A Pen by Kilian K Lindberg on CodePen.

License.

index.html

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 370 340" class="glogo">
  <title>GitLab</title>
  <description>Create, review and deploy code together</description>
  <defs>
    <!-- Filter discovered as part of PolyLion Work: https://codepen.io/grayghostvisuals/pen/RNLgJP -->
    <filter id="polycleaner" color-interpolation-filters="sRGB">
      <feComponentTransfer>
        <feFuncA type="table" tableValues="0 0.5 1 1" />
      </feComponentTransfer>
    </filter>
  </defs>

  <g fill="none" filter="url(#polycleaner)" id="glfox">
    <g id="glface" class="glface">
      <g class="ear">
        <path d="M22.066 131.808h95.32L76.42 5.735c-2.107-6.487-11.284-6.487-13.39 0L22.065 131.808z" fill="#E24329" class="logo-svg-shape logo-dark-orange-shape"></path>
        <path d="M348.73 131.808h-95.32L294.376 5.735c2.108-6.487 11.285-6.487 13.392 0l40.963 126.073z" fill="#E24329" class="logo-svg-shape logo-dark-orange-shape"></path>
      </g>

      <g class="center">
        <path d="M185.398 341.13l68.013-209.322H117.39L185.4 341.13z" fill="#E24329" class="logo-svg-shape logo-dark-orange-shape"></path>
      </g>

      <g class="left">
        <path d="M185.398 341.13l-68.013-209.322h-95.32L185.4 341.128z" fill="#FC6D26" class="logo-svg-shape logo-orange-shape"></path>
        <path d="M22.066 131.808l-20.67 63.61c-1.884 5.803.18 12.16 5.117 15.744L185.398 341.13 22.066 131.807z" fill="#FCA326" class="logo-svg-shape logo-light-orange-shape"></path>
      </g>

      <g class="right">
        <path d="M185.398 341.13l68.013-209.322h95.32L185.4 341.128z" fill="#FC6D26" class="logo-svg-shape logo-orange-shape"></path>
        <path d="M348.73 131.808l20.67 63.61c1.884 5.803-.18 12.16-5.117 15.744L185.398 341.13 348.73 131.807z" fill="#FCA326" class="logo-svg-shape logo-light-orange-shape"></path>
      </g>
    </g>
  </g>
</svg>

script.js

// So Firefox and Safari can do scaling and rotation combos.
CSSPlugin.useSVGTransformAttr = false;

function glFox() {
  var tl        = new TimelineMax({ delay: 0.5 });
  var faceright = document.querySelectorAll('.glface .right path'),
      faceleft  = document.querySelectorAll('.glface .left path'),
      facectr   = document.querySelectorAll('.glface .center path'),
      ears      = document.querySelectorAll('.glface .ear path');

  TweenMax.set(faceright, { transformOrigin: 'bottom left' });
  TweenMax.set(faceleft, { transformOrigin: 'bottom right' });
  TweenMax.set([facectr, ears], { transformOrigin: 'bottom center'});
  TweenMax.set([faceleft, faceright, facectr], { opacity: 0, scale: 0 })
  TweenMax.set(ears, { opacity: 0, rotationZ: 180 });

  var scale_in = {
    opacity: 1,
    scale: 1,
    ease: Cubic.easeInOut
  };

  var unfold_ears = {
    rotationX: -180,
    opacity: 1,
    ease: Power1.easeInOut
  };

  tl.staggerTo(faceright, 1, scale_in, 0.05675, 0)
    .staggerTo(faceleft, 1, scale_in, 0.05675, 0)
    .to(facectr, 1, scale_in, '-=0.9')
    .to(ears, 1, unfold_ears, '-=0.3');

  return tl;
}

function masterFox() {
  var tl = new TimelineMax();
  tl.add(glFox());
  tl.timeScale(1.675);
  return tl;
}

masterFox();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://codepen.io/grayghostvisuals/pen/a08e0d79c150ff5030f9b6afaa137749"></script>

style.scss

// Demo
// =========================================================================
html,body {height: 100%;}body{display: flex;flex-direction:column;align-items: center;justify-content:center;width:100%;background:#554488;}svg{max-width: 100%;}


// Required
// =========================================================================

.glogo:not(:root) {
  overflow: visible
}

.glogo {
  height: auto;
  width: 142px;
}

.glface path {
  opacity: 0;
}