Google SVG Logo - GreenSock Animation
Google SVG Logo animations using GreenSock.
https://ihatetomatoes.net/google-svg-logo-animation-with-greensock/
Forked from Petr TIchy's Pen Google SVG Logo - GreenSock Animation.
Google SVG Logo animations using GreenSock.
https://ihatetomatoes.net/google-svg-logo-animation-with-greensock/
Forked from Petr TIchy's Pen Google SVG Logo - GreenSock Animation.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="GoogleLogo" x="0" y="0" viewBox="0 0 642 466" enable-background="new 0 0 642 466" xml:space="preserve" width="642" height="466"> | |
<defs> | |
<clipPath id="cut-off-gline"> | |
<rect id="gLineMask" x="287.2" y="225.9" width="102.2" height="28.9"/> | |
</clipPath> | |
</defs> | |
<g id="circles"> | |
<path id="blueG" class="circle" fill="none" stroke="#4285F4" stroke-width="28" d="M318 182.9c-32 0-57 30.8-57 57.5s20 57.5 57 57.5 57.9-26.7 57.9-57.5S350.2 182.9 318 182.9z"/> | |
<path id="greenG" class="circle" fill="none" stroke="#34A853" stroke-width="28" d="M318 182.9c-32 0-57 30.8-57 57.5s20 57.5 57 57.5 57.9-26.7 57.9-57.5S350.2 182.9 318 182.9z"/> | |
<path id="redG" class="circle" fill="none" stroke="#EA4335" stroke-width="28" d="M318 182.9c-32 0-57 30.8-57 57.5s20 57.5 57 57.5 57.9-26.7 57.9-57.5S350.2 182.9 318 182.9z"/> | |
<path id="redGb" class="circle" fill="none" stroke="#EA4335" stroke-width="28" d="M318 182.9c-32 0-57 30.8-57 57.5s20 57.5 57 57.5 57.9-26.7 57.9-57.5S350.2 182.9 318 182.9z"/> | |
<path id="yellowG" class="circle" fill="none" stroke="#FBBC05" stroke-width="28" d="M318 182.9c-32 0-57 30.8-57 57.5s20 57.5 57 57.5 57.9-26.7 57.9-57.5S350.2 182.9 318 182.9z"/> | |
</g> | |
<g id="helpers" display="none"> | |
<circle display="inline" fill="none" stroke="#000000" stroke-miterlimit="10" cx="318" cy="240.4" r="71.5"/> | |
<circle display="inline" fill="none" stroke="#000000" cx="319" cy="240.4" r="43.6"/> | |
<line display="inline" fill="none" stroke="#000000" x1="318.6" y1="196.8" x2="318.6" y2="168.9"/> | |
<line display="inline" fill="none" stroke="#000000" x1="318.6" y1="311.8" x2="318.6" y2="283.9"/> | |
<line display="inline" fill="none" stroke="#000000" x1="362.4" y1="240.4" x2="389.4" y2="240.4"/> | |
<line display="inline" fill="none" stroke="#000000" x1="246.5" y1="240.4" x2="275.4" y2="240.4"/> | |
<g id="spacersW" display="inline"> | |
<circle id="spacer5" fill="none" cx="447.2" cy="240.4" r="14.5"/> | |
<circle id="spacer4" fill="none" cx="389.4" cy="240.4" r="14.5"/> | |
<circle id="spacer3" fill="none" cx="331.6" cy="240.4" r="14.5"/> | |
<circle id="spacer2" fill="none" cx="273.8" cy="240.4" r="14.5"/> | |
<circle id="spacer1" fill="none" cx="216" cy="240.4" r="14.5"/> | |
</g> | |
<g id="spacersH" display="inline"> | |
<circle id="spacer5_1_" fill="none" cx="331.6" cy="356" r="14.5"/> | |
<circle id="spacer4_1_" fill="none" cx="331.6" cy="298.2" r="14.5"/> | |
<circle id="spacer3_1_" fill="none" cx="331.6" cy="240.4" r="14.5"/> | |
<circle id="spacer2_1_" fill="none" cx="331.6" cy="182.5" r="14.5"/> | |
<circle id="spacer1_1_" fill="none" cx="331.6" cy="124.7" r="14.5"/> | |
</g> | |
<rect id="squareOutline" x="246.5" y="168.9" display="inline" fill="none" width="142.9" height="142.9"/> | |
</g> | |
<polygon id="gMask" fill="#ffffff" points="326.4 225.9 390.4 225.9 379.7 192 368.5 183.9 "/> | |
<g id="dots"> | |
<circle class="dot dotBlue" fill="#4285F4" cx="244.9" cy="240.4" r="14.5"/> | |
<circle class="dot dotRed" fill="#EA4335" cx="302.7" cy="240.4" r="14.5"/> | |
<circle class="dot dotYellow" fill="#FBBC05" cx="360.5" cy="240.4" r="14.5"/> | |
<circle class="dot dotGreen" fill="#34A853" cx="418.3" cy="240.4" r="14.5"/> | |
</g> | |
<g id="gLineGroup" clip-path="url(#cut-off-gline)"> | |
<path id="gLine" display="inline" fill="none" stroke="#4285F4" stroke-width="28.91" d="M319 240.4h68"/> | |
<path id="gLineAnim" fill="#4285F4" d="M388.7 254.8H319v-28.9h69.7c0 0 13.6 1.3 13.6 14.5C402.3 253.5 388.7 254.8 388.7 254.8z"/> | |
</g> | |
</svg> | |
<div id="controls"> | |
<div id="slider"></div> | |
</div> |
/* Moving parts*/ | |
var $circles = $('.circle'), | |
$dots = $('.dot'), | |
$dotBlue = $('.dotBlue'), | |
$dotRed = $('.dotRed'), | |
$dotYellow = $('.dotYellow'), | |
$dotGreen = $('.dotGreen'), | |
$gBlue = $('#blueG'), | |
$gRed = $('#redG'), | |
$gRedb = $('#redGb'), | |
$gYellow = $('#yellowG'), | |
$gGreen = $('#greenG'), | |
$gLine = $('#gLine'), | |
$gLineAnim = $('#gLineAnim'), | |
$gLineMask = $('#gLineMask'), | |
$gMask = $('#gMask'), | |
$controls = $('#controls'), | |
$bcg = $('.logoBcg'), | |
visible = false, | |
pathRed = [{x: 0, y: -1},{x: 31, y: -51},{x: 74, y: -1}], | |
pathYellow = [{x: -41, y: 46},{x: -76, y: 0},{x: -35, y: -46},{x: 14, y: 1}], | |
pathGreen = [{x: -67, y: 82},{x: -145, y: 0},{x: -100, y: -46},{x: -43, y: 3}], | |
pathBlueBack = [{x: 51, y: 53}, {x: 15, y: 25},{x: 0, y: 0}], | |
pathRedBack = [{x: 60, y: -37}, {x: 50, y: 40},{x: 0, y: 0}], | |
pathYellowBack = [{x: -5, y: -44}, {x: 3, y: -24},{x: 0, y: 0}], | |
pathGreenBack = [{x: -108, y: -56}, {x: -27, y: -47},{x: 0, y: 0}], | |
tl = new TimelineMax({onUpdate: updateSlider, repeat: -1/*, onReverseComplete: showControls*/}); | |
/* Init */ | |
function init(){ | |
TweenLite.set([$gLine,$circles], {autoAlpha: 0}); | |
TweenLite.set($gBlue, {drawSVG:"61% 78%"}); /* start at 71% 78% */ | |
TweenLite.set($gGreen, {drawSVG:"36% 61%"}); | |
TweenLite.set($gYellow, {drawSVG:"17% 36%"}); | |
TweenLite.set($gRed, {drawSVG:"0% 26%"}); | |
TweenLite.set($gRedb, {drawSVG:"78% 100%", transformOrigin: 'center center'}); | |
TweenLite.set($gLineAnim, {autoAlpha: 0}); | |
} | |
init(); | |
/* Dots wave */ | |
function getDotsWaveTl(){ | |
var dotsWaveTl = new TimelineMax(); | |
$dots.each(function(index, element){ | |
var dotWaveTl = new TimelineMax(), | |
delay = 0.15; | |
dotWaveTl | |
.to(element, 0.4, {y: -7, ease:Power1.easeOut}) | |
.to(element, 0.8, {y: 7, ease:Power1.easeInOut}) | |
.to(element, 0.4, {y: 0, ease:Power1.easeIn}) | |
.to(element, 0.4, {y: -7, ease:Power1.easeOut}) | |
.to(element, 0.8, {y: 7, ease:Power1.easeInOut}) | |
.to(element, 0.4, {y: 0, ease:Power1.easeIn}); | |
dotsWaveTl.add(dotWaveTl, delay*index); | |
}); | |
return dotsWaveTl; | |
} | |
/* Dots rotation */ | |
function getDotsRotateTl(){ | |
var dotsRotateTl = new TimelineMax(); | |
dotsRotateTl | |
.to($dotRed, 0.9, {bezier:{curviness: 1.5, values: pathRed, ease:Power2.easeInOut}}, 'move') | |
.to($dotYellow, 1.2, {bezier:{curviness: 1, values: pathYellow, ease:Power2.easeInOut}}, 'move') | |
.to($dotGreen, 1.5, {bezier:{curviness: 1, values: pathGreen, ease:Power2.easeInOut}}, 'move'); | |
return dotsRotateTl; | |
} | |
/* Draw G */ | |
function getDrawGTl(){ | |
var drawGTl = new TimelineMax(); | |
drawGTl | |
.to($dotBlue, 0.6, {x: 47, ease:Power2.easeIn}) | |
.set($gLineAnim, {autoAlpha: 1, immediateRender: false}) | |
.set($dotBlue, {autoAlpha: 0, immediateRender: false}, '+=0.1') | |
.from($gLineAnim, 0.8, {x: -120, ease:Power2.easeOut}, '-=0.2') | |
/* draw red part */ | |
.add('startDrawingG', 1) | |
.set($gRed, {autoAlpha: 1, immediateRender: false}, 'startDrawingG') | |
.fromTo($gRed, 0.5, {drawSVG:"71% 88%"}, {drawSVG:"0% 26%", ease:Power1.easeOut}, '-=0.2') | |
.set($dotRed, {autoAlpha: 0, immediateRender: false}, 'startDrawingG') | |
/* draw yellow part */ | |
.set($gYellow, {autoAlpha: 1, immediateRender: false}, 'startDrawingG+=0.1') | |
.fromTo($gYellow, 0.6, {drawSVG:"71% 88%"}, {drawSVG:"17% 36%", ease:Power2.easeOut}, '-=0.45') | |
.set($dotYellow, {autoAlpha: 0, immediateRender: false}, 'startDrawingG+=0.1') | |
/* draw green part */ | |
.set($gGreen, {autoAlpha: 1, immediateRender: false}, 'startDrawingG+=0.1') | |
.fromTo($gGreen, 0.55, {drawSVG:"71% 88%"}, {drawSVG:"36% 61%", ease:Power2.easeOut}, '-=0.6') | |
.set($dotGreen, {autoAlpha: 0, immediateRender: false}, 'startDrawingG+=0.4') | |
/* draw blue part */ | |
.set($gLineAnim, {autoAlpha: 0, immediateRender: false}, 'startDrawingG+=0.3') | |
.set($gLine, {autoAlpha: 1, immediateRender: false}, 'startDrawingG+=0.3') | |
.set($gBlue, {autoAlpha: 1, immediateRender: false}, 'startDrawingG+=0.3') | |
.fromTo($gBlue, 0.55, {drawSVG:"71% 88%"}, {drawSVG:"61% 78%", ease:Power2.easeOut}, '-=0.55') | |
/* draw ending red part */ | |
.set($gRedb, {autoAlpha: 1, immediateRender: false}, 'startDrawingG+=0.25') | |
.fromTo($gRedb, 0.7, {rotation: '-10', drawSVG:"100% 100%"}, {rotation: '0',drawSVG:"80% 100%", ease:Power2.easeOut}, '-=0.22'); | |
return drawGTl; | |
} | |
/* Draw G */ | |
function getBackToDotsTl(){ | |
var backToDotsTl = new TimelineMax(); | |
backToDotsTl | |
.to($gLineMask, 0.3, {attr: {x: 365}, transformOrigin: 'right center', ease:Power0.easeNone}) | |
.set([$gLineMask, $gLine], {autoAlpha: 0}) | |
.add('rotateG') | |
.to($gBlue, 0.3, {drawSVG:"56% 78%", ease:Power0.easeNone}, 'rotateG-=0.3') | |
.to($gGreen, 0.3, {drawSVG:"31% 56%", ease:Power0.easeNone}, 'rotateG-=0.3') | |
.to($gYellow, 0.3, {drawSVG:"12% 31%", ease:Power0.easeNone}, 'rotateG-=0.3') | |
.to($gRed, 0.3, {drawSVG:"0% 21%", ease:Power0.easeNone}, 'rotateG-=0.3') | |
.add('rotateCircles') | |
.to([$gBlue, $gRed, $gGreen], 0.4, {rotation:"+=50", transformOrigin: 'center center', ease:Power0.easeNone}, 'rotateCircles') | |
.to($gGreen, 0.4, {drawSVG:"10% 20%", ease:Power0.easeNone}, 'rotateCircles') | |
.to($gYellow, 0.4, {rotation:"+=40", transformOrigin: 'center center', drawSVG:"0% 10%", ease:Power0.easeNone}, 'rotateCircles') | |
.to($gBlue, 0.4, {drawSVG:"50% 60%", ease:Power0.easeNone}, 'rotateCircles') | |
.to($gRed, 0.1, {drawSVG:"0% 0%", ease:Power0.easeNone}, 'rotateCircles') | |
.to($gRedb, 0.3, {rotation:"+=50", drawSVG:"80% 90%", ease:Power2.easeInOut}, 'rotateCircles') | |
/* show red dot */ | |
.set($dotRed, {autoAlpha: 1, x: 60, y: -37}, 'rotateCircles+=0.1') | |
.set($gRedb, {autoAlpha: 0}, 'rotateCircles+=0.1') | |
.to($dotRed, 0.9, {bezier:{curviness: 1.5, values: pathRedBack, ease:Power2.easeOut}}, 'rotateCircles+=0.1') | |
/* show blue dot */ | |
.set($dotBlue, {autoAlpha: 1, x: 51, y: 53}, 'rotateCircles+=0.3') | |
.set($gBlue, {autoAlpha: 0}, 'rotateCircles+=0.3') | |
.to($dotBlue, 0.6, {bezier:{curviness: 1.5, values: pathBlueBack, ease:Power2.easeOut}}, 'rotateCircles+=0.3') | |
/* show yellow dot */ | |
.set($dotYellow, {autoAlpha: 1, x: -5, y: -44}, 'rotateCircles+=0.4') | |
.set($gYellow, {autoAlpha: 0}, 'rotateCircles+=0.4') | |
.to($dotYellow, 0.7, {bezier:{curviness: 1.5, values: pathYellowBack, ease:Power2.easeOut}}, 'rotateCircles+=0.4') | |
/* show green dot */ | |
.set($dotGreen, {autoAlpha: 1, x: -108, y: -56}, 'rotateCircles+=0.4') | |
.set($gGreen, {autoAlpha: 0}, 'rotateCircles+=0.4') | |
.to($dotGreen, 0.6, {bezier:{curviness: 1.5, values: pathGreenBack, ease:Power2.easeOut}}, 'rotateCircles+=0.4') | |
.to($gMask, 0.3, {rotation:"+=60", transformOrigin: '-9 58', ease:Power2.easeInOut}, 'rotateCircles'); | |
return backToDotsTl; | |
} | |
/* Main timeline */ | |
tl.add(getDotsWaveTl()) | |
.add(getDotsRotateTl(), '-=0.35') | |
.add(getDrawGTl(), '-=1.6') | |
.add(getBackToDotsTl(), '+=2'); | |
tl.timeScale(1.8); | |
$("#slider").slider({ | |
range: false, | |
min: 0, | |
max: 100, | |
step:.1, | |
slide: function ( event, ui ) { | |
tl.pause(); | |
//adjust the timeline’s progress() based on slider value | |
tl.progress( ui.value/100 ); | |
} | |
}); | |
function updateSlider() { | |
$("#slider").slider("value", tl.progress() *100); | |
} | |
function showControls(){ | |
if(visible === false) { | |
TweenMax.from($controls, 0.5, {autoAlpha: 0, ease:Power0.easeNone}); | |
visible = true; | |
} | |
} | |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script> | |
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12"></script> | |
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> |
/* =Colors */ | |
$red: #EA4335; | |
$green: #34A853; | |
$blue: #4285F4; | |
$yellow: #FBBC05; | |
body { | |
overflow: hidden; | |
} | |
#GoogleLogo { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%) | |
} | |
#controls { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
width: 310px; | |
transform: translate(-50%, 120px); | |
visibility: hidden; | |
} | |
.circle, | |
#gLine, | |
#gLineAnim { | |
opacity: 0; | |
} |
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" /> |