Windows Hello Animation

index.html

<div id="main-ctr">
  <svg xmlns="http://www.w3.org/2000/svg" width="294" height="241" viewBox="0 0 294 241">
    <g id="group" fill="none" fill-rule="evenodd">
      <g id="smile">
        <path id="smile-up" stroke="#FFF" stroke-width="30" d="M238.797 75.04C222.935 40.772 188.243 17 148 17c-39.62 0-73.857 23.04-90.046 56.453" stroke-linecap="round"/>
        <path id="smile-down" stroke="#FFF" stroke-width="30" d="M238.843 166c-15.863 34.268-50.554 58.04-90.797 58.04-39.62 0-73.857-23.04-90.046-56.453" stroke-linecap="round"/>
        <path id="bg" fill="#FFF" d="M43 2h211v237H43z" opacity=".1"/>
      </g>
      <path id="eye-left" fill="#FFF" d="M148 173c29.27 0 53-23.73 53-53s-23.73-53-53-53c-4.956 0-9.753.68-14.303 1.952C111.374 75.194 95 95.685 95 120c0 29.27 23.73 53 53 53z"/>
      <path id="eye-right" fill="#FFF" d="M148 173c29.27 0 53-23.73 53-53s-23.73-53-53-53c-4.016 0-7.927.447-11.687 1.293C112.665 73.615 95 94.745 95 120c0 29.27 23.73 53 53 53z"/>
      <path id="eye-to-left" fill="#FFF" d="M106 143c12.15 0 22-9.85 22-22s-9.85-22-22-22c-2.028 0-3.992.274-5.857.788C90.836 102.352 84 110.878 84 121c0 12.15 9.85 22 22 22z"/>
      <path id="eye-to-right" fill="#FFF" d="M187 143c12.15 0 22-9.85 22-22s-9.85-22-22-22c-3.286 0-6.404.72-9.204 2.012C170.242 104.496 165 112.136 165 121c0 12.15 9.85 22 22 22z"/>
    </g>
  </svg>
  <h1 class="hello">Hello, Bhakti!</h1>
</div>

script.js

var mainCtr = $("#main-ctr"),
    hello = $(".hello"),
    eyeLeft = $("#eye-left"),
    eyeRight = $("#eye-right"),
    eyeToLeft = $("#eye-to-left"),
    eyeToRight = $("#eye-to-right"),
    wink = $("#wink"),
    smileUp = $("#smile-up"),
    smileDown = $("#smile-down"),
    smile = $("#smile");

var tl = new TimelineMax({
  repeat: -1,
  repeatDelay: .3,
  delay: .3
});

TweenMax.set([mainCtr, hello], {
  opacity: 0
});

tl
  .to(mainCtr, .3, {
    opacity: 1
  })
  .to(smileDown, .3, {
    morphSVG: "#smile-up"
  })
  .to(smile, .3, {
    rotation: -30,
    transformOrigin: "center center",
    ease: Circ.ease
  })
  .to(smile, .9, {
    rotation: 900,
    transformOrigin: "center center",
    ease: Circ.easeInOut
  })
  .to(eyeLeft, .3, {
    morphSVG: "#eye-to-left",
    ease: Power2.ease
  }, "-=.3")
  .to(eyeRight, .3, {
    morphSVG: "#eye-to-right",
    ease: Power2.ease
  }, "-=.3")
  .to(eyeRight, .1, {
    scaleY: .25,
    transformOrigin: "center center"
  })
  .to(eyeRight, .1, {
    scaleY: 1
  })
  .to(hello, .3, {
    opacity: 1
  }, "-=.3")
  .to(mainCtr, .6, {
    delay: 1,
    opacity: 0
  })

// copy
balapaCop("Windows Hello Animation", "rgba(255,255,255,.8)");

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=182"></script>
<script src="https://codepen.io/balapa/pen/c58fffe58d661ae3d4b168a43eb3b2b8.js"></script>

style.scss

@import "bourbon";
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);

html,
body {
  display: table;
  width: 100%;
  height: 100%;
  background: black;
}

.hello {
  color: white;
  letter-spacing: 2px;
  font-size: 25px;
  font-family: "roboto";
  font-weight: 300;
}

#main-ctr {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.content {
  border: 1px solid black;
  display: inline-block;
  position: relative;
}

svg {
    
  @include transform(scale(.5));
  
  #smile-up,
  #circle,
  #eye-to-left,
  #eye-to-right,
  #wink,
  #bg {
    visibility: hidden;
  }
}

windows-hello-animation.markdown

Windows Hello Animation

Recreation of the awesome windows hello animation. Made with SVG and Greensock GSAP.

A Pen by Bhakti Al Akbar on CodePen.

License.