GitLab's SVG logo animated w/GreenSock https://about.gitlab.com
A Pen by Kilian K Lindberg on CodePen.
GitLab's SVG logo animated w/GreenSock https://about.gitlab.com
A Pen by Kilian K Lindberg on CodePen.
<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> |
// 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(); |
<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> |
// 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; | |
} |