Google Logo 2015

Google Logo 2015.markdown

Google Logo 2015

Did an attempt to replicate the new Google logo animation. Extremely difficult by hand!

A Pen by Robert Bue on CodePen.

License.

index.html

<div class="logo-container">
  <h2>Google Logo <strong>2015</strong></h2>
  <div class="logo">
    <svg xmlns="http://www.w3.org/2000/svg" width="999.99994" height="328.55609">
      <circle class="circle circle-g-1" cx="128" cy="128" r="110" fill="#4285F4" stroke="#4285F4" stroke-width="35"></circle>

      <circle class="circle circle-o-1" cx="342" cy="173" r="65" fill="#EA4335" stroke="#EA4335" stroke-width="35"></circle>

      <circle class="circle circle-o-2" cx="520" cy="173" r="65" fill="#FBBC05" stroke="#FBBC05" stroke-width="35"></circle>

      <circle class="circle circle-g-2" cx="696" cy="173" r="62" fill="#4285F4" stroke="#4285F4" stroke-width="35"></circle>

      <circle class="circle circle-l" cx="815" cy="203" r="32" fill="#34A853" stroke="#34A853" stroke-width="35"></circle>

      <circle class="circle circle-e" cx="929" cy="173" r="62" fill="#EA4335" stroke="#EA4335" stroke-width="35"></circle>

      <g transform="translate(-39.48794,-563.5689)">
        <path
           style="fill:#4285F4;"
           d="m 285.59326,679.7455 -116.57208,0 0,34.59112 82.67278,0 c -4.08416,48.50604 -44.43964,69.19186 -82.533,69.19186 -48.73645,0 -91.263699,-38.34565 -91.263699,-92.09217 0,-52.35678 40.539609,-92.67907 91.371349,-92.67907 39.21721,0 62.32598,25.00036 62.32598,25.00036 l 24.21994,-25.0811 c 0,0 -31.0869,-34.6076 -87.78383,-34.6076 -72.189939,0 -128.04276,60.93421 -128.04276,126.75102 0,64.4929 52.539316,127.38344 129.88616,127.38344 68.03087,0 117.83002,-46.60384 117.83002,-115.51567 0,-14.5391 -2.11086,-22.94219 -2.11086,-22.94219 z"
           class="letter-g-1"/>
        <path
           style="fill:#EA4335;"
           d="m 381.08638,654.69742 c -47.83177,0 -82.11068,37.39457 -82.11068,81.00809 0,44.25837 33.24858,82.34849 82.67279,82.34849 44.74232,0 81.39724,-34.1974 81.39724,-81.39723 0,-54.09769 -42.6382,-81.95935 -81.95935,-81.95935 z m 0.47563,32.08327 c 23.52246,0 45.81162,19.01657 45.81162,49.65988 0,29.99323 -22.19546,49.55179 -45.91972,49.55179 -26.06835,0 -46.63315,-20.87805 -46.63315,-49.7896 0,-28.29151 20.30981,-49.42207 46.74125,-49.42207 z"
           class="letter-o-1"/>
        <path
           style="fill:#FBBC05;"
           d="m 559.67284,654.69742 c -47.83178,0 -82.11068,37.39457 -82.11068,81.00809 0,44.25837 33.24858,82.34849 82.67278,82.34849 44.74232,0 81.39724,-34.1974 81.39724,-81.39723 0,-54.09769 -42.6382,-81.95935 -81.95934,-81.95935 z m 0.47562,32.08327 c 23.52246,0 45.81162,19.01657 45.81162,49.65988 0,29.99323 -22.19545,49.55179 -45.91971,49.55179 -26.06836,0 -46.63316,-20.87805 -46.63316,-49.7896 0,-28.29151 20.30981,-49.42207 46.74125,-49.42207 z"
           class="letter-o-2"/>
        <path
           style="fill:#4285F4;"
           d="m 734.8239,654.7839 c -43.90433,0 -78.41379,38.45346 -78.41379,81.61343 0,49.16322 40.00883,81.76477 77.65707,81.76477 23.279,0 35.65723,-9.24053 44.79551,-19.84666 l 0,16.1065 c 0,28.18012 -17.1105,45.05493 -42.93623,45.05493 -24.94906,0 -37.46334,-18.55133 -41.81202,-29.07816 l -31.39145,13.12301 c 11.1365,23.54655 33.55373,48.10328 73.4629,48.10328 43.65151,0 76.92201,-27.49534 76.92201,-85.15902 l 0,-146.77447 -34.24521,0 0,13.83645 C 768.34021,662.18201 753.94124,654.7839 734.8239,654.7839 z m 3.17802,32.01841 c 21.52544,0 43.62806,18.37955 43.62806,49.76798 0,31.90361 -22.05551,49.48692 -44.10368,49.48692 -23.4063,0 -45.18466,-19.00543 -45.18466,-49.18425 0,-31.3585 22.61886,-50.07065 45.66028,-50.07065 z"
           class="letter-g-2"/>
        <path
           style="fill:#34A853;"
           d="m 836.97578,813.26724 35.97477,0 0,-240.75423 -35.97477,0 z"
           class="letter-l"/>
        <path
           style="fill:#EA4335;"
           d="m 965.37374,654.58932 c -41.41436,0 -76.18695,32.94983 -76.18695,81.5702 0,51.44673 38.75942,81.95934 80.16493,81.95934 34.55818,0 55.76818,-18.90578 68.42558,-35.84505 l -28.2351,-18.7873 c -7.3268,11.37062 -19.57556,22.48423 -40.01753,22.48423 -22.96221,0 -33.51997,-12.5735 -40.06088,-24.75428 l 109.52411,-45.44409 -5.6859,-13.31758 c -10.5848,-26.08092 -35.26794,-47.86547 -67.92826,-47.86547 z m 1.42681,31.41307 c 14.92324,0 25.66309,7.9342 30.22407,17.4469 l -73.13864,30.5699 c -3.15319,-23.66749 19.26857,-48.0168 42.91457,-48.0168 z"
           class="letter-e"/>
      </g>
    </svg>
  </div>
</div>

script.js

TweenMax.set('.letter-g-1, .letter-g-2, .letter-o-1, .letter-o-2, .letter-e', { transformOrigin: 'center center' });
TweenMax.set('.circle-g-1, .circle-g-2, .circle-o-1, .circle-o-2, .circle-e', { transformOrigin: 'bottom center' });
TweenMax.set('.letter-l, .circle-l', { transformOrigin: 'bottom center' });

var tl = new TimelineMax({ yoyo: true, repeat: -1, delay: 1, repeatDelay: 0.5 });

var easing = Power4.easeInOut;

tl.to('.circle-g-1', 0.2, { opacity: 1, ease: Power2.easeOut }, "start");
tl.to('.letter-g-1', .2, { opacity: 0, scale: 0, x: 100, ease: easing }, "start");
tl.to('.circle-g-1', .35, { scale: 0.27, x: 100, ease: easing }, "start");
//tl.to('.circle-g-1', 0.2, { fill: '#4285F4', ease: Power2.easeOut }, "start+=0.2");

tl.to('.circle-o-1', 0.2, { opacity: 1, ease: Power2.easeOut }, "start+=0.05");
tl.to('.letter-o-1', .2, { opacity: 0, scale: 0, x: 50, ease: easing }, "start+=0.05");
tl.to('.circle-o-1', .35, { scale: 0.43, x: 50, ease: easing }, "start+=0.05");
tl.to('.circle-o-1', 0.2, { fill: '#EA4335', ease: Power2.easeOut }, "start+=0.05");

tl.to('.circle-o-2', 0.2, { opacity: 1, ease: Power2.easeOut }, "start+=0.1");
tl.to('.letter-o-2', .2, { opacity: 0, scale: 0, x: 50, ease: easing }, "start+=0.1");
tl.to('.circle-o-2', .35, { scale: 0.43, x: 50, ease: easing }, "start+=0.1");
tl.to('.circle-o-2', 0.2, { fill: '#FBBC05', ease: Power2.easeOut }, "start+=0.1");

tl.to('.circle-g-2', 0.2, { opacity: 1, ease: Power2.easeOut }, "start+=0.15");
tl.to('.letter-g-2', .2, { opacity: 0, scale: 0, x: -40, ease: easing }, "start+=0.15");
tl.to('.circle-g-2', .35, { scale: 0, y: -20, x: -40, ease: easing }, "start+=0.15");
tl.to('.circle-g-2', 0.2, { fill: '#4285F4', ease: Power2.easeOut }, "start+=0.15");

tl.to('.circle-l', .2, { opacity: 1, ease: Power2.easeOut }, "start+=0.2");
tl.to('.letter-l', .35, { scaleY: 0, scaleX: 1.5, y: -35, x: -80, ease: easing }, "start+=0.2");
//tl.to('.letter-l', .15, { opacity: 0, ease: Power2.easeOut }, "start+=0.3");
tl.fromTo('.circle-l', .35, { scale: 0 }, { scale: 0.75, x: -80, ease: easing }, "start+=0.2");

tl.to('.circle-e', 0.1, { opacity: 1, ease: Power2.easeOut }, "start+=0.25");
tl.to('.letter-e', .2, { opacity: 0, scale: 0, y: 30, x: -100, ease: easing }, "start+=0.25");
tl.to('.circle-e', .35, { scale: 0, y: -20, x: -130, ease: easing }, "start+=0.25");
tl.to('.circle-e', 0.2, { fill: '#EA4335', ease: Power2.easeOut }, "start+=0.25");

tl.staggerTo('.circle-g-1, .circle-o-1, .circle-o-2, .circle-l, .circle-e', 0.4, { y: -40, ease: Linear.easeNone }, 0.15, "start+=0.1");
tl.staggerTo('.circle-g-1, .circle-o-1, .circle-o-2, .circle-l, .circle-e', 0.4, { y: 0, ease: Linear.easeNone }, 0.15, "start+=0.5");

tl.timeScale(0.8);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>

style.scss

$google-blue: #4285F4;
$google-green: #34A853;
$google-yellow: #FBBC05;
$google-red: #EA4335;

.logo-container {
  position: absolute;
  top: 50%;
  left: 50%;
  
  width: 1000px;
  height: 328px;
  margin-top: -(328px/2);
  margin-left: -(1000px/2);
  
  font-family: Montserrat, sans-serif;
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  font-weight: normal;
  pointer-events: none;
  color: #010101;
   
  transform: scale(0.55);
  
  h2 strong {
    font-weight: 700;
    color: #010101;
  }
  
  .circle {
    opacity: 0;
  }
  
  g {
    //opacity: 0;
  }
}

styles

<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" />