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.
Forked from anonymous/Google SVG Logo - GreenSock Animation.markdown
Created
September 21, 2015 03:25
-
-
Save CodeMyUI/db876230c96a3c7c07de to your computer and use it in GitHub Desktop.
Google SVG Logo - GreenSock Animation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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; | |
| } | |
| } | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* =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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment