SOURCE

var tlOne = new TimelineMax({repeat:-1});
var tlTwo = new TimelineMax({repeat:-1, delay:2,});
var tlThree = new TimelineMax({repeat:-1, delay:2,}); 

function init() {
	var t = 400,
			ww = window.innerWidth,
			w = t + ww;

	TweenMax.to('.hands', 5, { rotation:360, repeat:-1, ease: Power0.easeNone });

	TweenMax.to('.right-wing', 0.5, { rotation:15, repeat:-1, yoyo:true, ease:Power0.easeNone });
	TweenMax.to('.left-wing', 0.5, { rotation:-15, repeat:-1, yoyo:true, ease:Power0.easeNone });
	
	tlOne.to('.one', 5, { x:w, ease:Power0.easeNone });
	tlTwo.to('.two', 3, { x:w, ease:Power0.easeNone });
	tlThree.to('.three', 7, { x:w, ease:Power0.easeNone });	
}

init();


(function($,sr){
  // debouncing function from John Hann : http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;
      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null; 
          };
          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);
          timeout = setTimeout(delayed, threshold || 100); 
      };
  }
	jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');


$(window).smartresize(function(){
	tlOne.restart();
	tlTwo.restart();
	tlThree.restart();
});

<div class="bg">Ganxiaozhe</div>
<div class="tempus-fugit one">
  <div class="left-wing"></div>
  <div class="right-wing"></div>
  <div class="clock-face"></div>
  <div class="hands"></div>
</div>
<div class="tempus-fugit two">
  <div class="left-wing"></div>
  <div class="right-wing"></div>
  <div class="clock-face"></div>
  <div class="hands"></div>
</div>
<div class="tempus-fugit three">
  <div class="left-wing"></div>
  <div class="right-wing"></div>
  <div class="clock-face"></div>
  <div class="hands"></div>
</div>

@import url('https://fonts.googleapis.com/css?family=Dancing+Script');
body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
}
body {
  overflow: hidden;
  background: #212121;
  font-family: 'Dancing Script', cursive;
}
.bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(http://andrewashley.co.nz/code-examples/time-flys/tea.jpg) bottom right no-repeat;
  background-size: cover;
  opacity: 0.3;
  line-height: 100vh;
  text-shadow: 2px 2px 10px rgba(250, 172, 23, 0.8);
  text-align: center;
  font-size: 10vw;
  color: #fff;
}
.tempus-fugit {
  top: 0;
  left: -400px;
  position: absolute;
  width: 358px;
  height: 197px;
}
.tempus-fugit > div {
  position: absolute;
}
.tempus-fugit.two {
  top: 400px;
}
.tempus-fugit.three {
  top: 200px;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}
.clock-face {
  top: 50px;
  left: 85px;
  width: 146px;
  height: 147px;
  background: url(http://andrewashley.co.nz/code-examples/time-flys/clock_face.png) no-repeat;
}
.hands {
  top: 65px;
  left: 95px;
  width: 119px;
  height: 119px;
  background: url(http://andrewashley.co.nz/code-examples/time-flys/clock_hands.png) no-repeat;
  -webkit-transform-origin: center;
          transform-origin: center;
}
.left-wing {
  top: 0;
  left: 0;
  width: 121px;
  height: 119px;
  background: url(http://andrewashley.co.nz/code-examples/time-flys/wing_left.png) no-repeat;
  -webkit-transform-origin: center right;
          transform-origin: center right;
}
.right-wing {
  top: 80px;
  right: 8px;
  width: 137px;
  height: 85px;
  background: url(http://andrewashley.co.nz/code-examples/time-flys/wing_right.png) no-repeat;
  -webkit-transform-origin: center left;
          transform-origin: center left;
}