<!DOCTYPE HTML>
<html>
  <head>
  
  
    <style>
      body {
        margin: 0px;
        padding: 0px;
        background: teal;
      }
      #container {
        background-color: teal;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
    <script defer="defer"> 
      var sw = 578;
      var sh = 400;
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 400
      });
      var layer = new Kinetic.Layer({
        y: -30 
      });

      var leftEye = new Kinetic.Blob({
        x: 150,
        points: [0, 200, 50, 190, 100, 200, 50, 210],
        tension: 0.5,
        stroke: 'white',
        strokeWidth: 10    
      });
      
      var rightEye = new Kinetic.Blob({
        x: sw - 250,
        points: [0, 200, 50, 190, 100, 200, 50, 210],
        tension: 0.5,
        stroke: 'white',
        strokeWidth: 10     
      });
      
      var nose = new Kinetic.Spline({
        points: [240, 280, sw/2, 300, sw-240,280],
        tension: 0.5,
        stroke: 'white',
        strokeWidth: 10
      });
      
      var mouth = new Kinetic.Blob({
        points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],
        tension: 0.5,
        stroke: '#f6aa93',
        strokeWidth: 10
      });

      layer.add(leftEye)
           .add(rightEye)
           .add(nose)
           .add(mouth);

      stage.add(layer);
      
      // tweens
      
      var leftEyeTween = new Kinetic.Tween({
        node: leftEye,
        duration: 1,
        easing: Kinetic.Easings.ElasticEaseOut,
        y: -100,
        points: [0, 200, 50, 150, 100, 200, 50, 200]
      }); 
      
      var rightEyeTween = new Kinetic.Tween({
        node: rightEye,
        duration: 1,
        easing: Kinetic.Easings.ElasticEaseOut,
        y: -100,
        points: [0, 200, 50, 150, 100, 200, 50, 200]
      });
      
      var noseTween = new Kinetic.Tween({
        node: nose,
        duration: 1,
        easing: Kinetic.Easings.ElasticEaseOut,
        y: -100,
        points: [220, 280, sw/2, 200, sw-220,280]
      }); 
         
      var mouthTween = new Kinetic.Tween({
        node: mouth,
        duration: 1,
        easing: Kinetic.Easings.ElasticEaseOut,
        points: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]
      }); 

        var open = false;
        
        setInterval(function () {
            if (open) {
                leftEyeTween.reverse();
                rightEyeTween.reverse();
                noseTween.reverse();
                mouthTween.reverse();
                open = false;
            } else {
                leftEyeTween.play();
                rightEyeTween.play();
                noseTween.play();
                mouthTween.play();
                open = true;
            }
        }, 1000)

   

    </script>
  </body>
</html>

Browse more Codebits