<div class="preloader">
    <div class="square square-1 from-right">
      <div class="square-inner">
        <div class="square-overlay"></div>
      </div>
    </div>
    <div class="square square-2 square-image square-image-1 from-right">
      <div class="square-inner">
        <div class="square-overlay"></div>
      </div>
    </div>
    <div class="square square-3 from-right">
      <div class="square-inner">
        <div class="square-overlay"></div>
      </div>
    </div>
    <div class="square square-4 from-bottom">
      <div class="square-inner">
        <div class="square-overlay"></div>
      </div>
    </div>
    <div class="square square-5 square-last from-left">
      <div class="square-inner">
        <div class="square-overlay"></div>
      </div>
    </div>

    <div class="square square-6 from-right">
      <div class="square-inner">
        <div class="square-overlay"></div>
      </div>
    </div>
    <div class="square square-7 from-right">
      <div class="square-inner">
        <div class="square-overlay"></div>
      </div>
    </div>
    <div class="square square-8 from-right">
      <div class="square-inner">
        <div class="square-overlay"></div>
      </div>
    </div>
    <div class="square square-9 square-image square-logo from-bottom">
      <div class="square-inner">
        <div class="square-overlay"></div>
      </div>
    </div>
    <div class="square square-10 square-last from-left">
      <div class="square-inner">
        <div class="square-overlay"></div>
      </div>
    </div>

    <div class="square square-11 from-right">
      <div class="square-inner">
        <div class="square-overlay"></div>
      </div>
    </div>
    <div class="square square-12 from-right">
      <div class="square-inner">
        <div class="square-overlay"></div>
      </div>
    </div>
    <div class="square square-13 from-right">
      <div class="square-inner">
        <div class="square-overlay"></div>
      </div>
    </div>
    <div class="square square-14 square-image from-bottom">
      <div class="square-inner">
        <div class="square-overlay"></div>
      </div>
    </div>
    <div class="square square-15 square-last from-left">
      <div class="square-inner">
        <div class="square-overlay"></div>
      </div>
    </div>
</div>
@import "compass/css3";

.preloader {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;

    width: 100%;
    height: 100%;

    overflow: hidden;

    .square {
      position: relative;

      width: 20%;
      height: 33.3333%;

      float: left;

      //overflow: hidden;
    }

    .square-inner {
      width: 101%;
      height: 100%;
      margin-right: -1px;

      background-color: #2ecc71;
    }

    .square-overlay {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      background: #000;

      opacity: 0;
    }
}
View Compiled
var site = site || {};
site.window = $(window);
site.document = $(document);

var PageTransition = function() {

   var self = this;

   site.window.on('resize', function(){
     //self.resize();
   });

   //self.resize();

   TweenMax.set('.square', { perspective: '600px' });
  
   TweenMax.set('.square-inner', { backfaceVisibility: 'hidden' });

   TweenMax.set('.from-bottom', { perspectiveOrigin: '50% 100%' });
   TweenMax.set('.from-bottom .square-inner', { force3D: true, transformOrigin: '50% 100% 0' });

   TweenMax.set('.from-right', { perspectiveOrigin: '100% 50%' });
   TweenMax.set('.from-right .square-inner', { force3D: true, transformOrigin: '100% 50% 0' });

   TweenMax.set('.from-left', { perspectiveOrigin: '0 50%' });
   TweenMax.set('.from-left .square-inner', { force3D: true, transformOrigin: '0 50% 0' });

   self.hide();
  
   return self;
}

// Hide transition
PageTransition.prototype.hide = function() {   

   var self = this;

   self.pagetransitionTL = new TimelineMax({ yoyo:true, repeat: -1, onComplete: function() {
      //complete
   }});

   var transitionTime = .3;
   var transformPerspective = 0;
   var easeEffect = 'Linear.easeNone';
   //var easeEffect = 'Power2.easeOut';
  //var easeEffect = 'Expo.easeInOut';
   var degrees = 92;
   var opacity = .6;

   self.pagetransitionTL
   .to('.square-1 .square-inner', transitionTime, { rotationY: -degrees, ease: easeEffect }, "tl0")
   .to('.square-1 .square-overlay', transitionTime, { opacity: opacity, ease: easeEffect }, "tl0")
   
   .to('.square-2 .square-inner, .square-6 .square-inner', transitionTime, { rotationY: -degrees, ease: easeEffect }, "tl1")
   .to('.square-2 .square-overlay, .square-6 .square-overlay', transitionTime, { opacity: opacity, ease: easeEffect }, "tl1")

   .to('.square-3 .square-inner, .square-7 .square-inner, .square-11 .square-inner', transitionTime, { rotationY: -degrees, ease: easeEffect }, "tl2")
   .to('.square-5 .square-inner', transitionTime, { rotationY: degrees, ease: easeEffect }, "tl2")
   .to('.square-3 .square-overlay, .square-7 .square-overlay, .square-11 .square-overlay, .square-5 .square-overlay', transitionTime, { opacity: opacity, ease: easeEffect }, "tl2")

   .to('.square-8 .square-inner, .square-12 .square-inner', transitionTime, { rotationY: -degrees, ease: easeEffect }, "tl3")
   .to('.square-4 .square-inner', transitionTime, { rotationX: degrees, ease: easeEffect }, "tl3")
   .to('.square-10 .square-inner', transitionTime, { rotationY: degrees, ease: easeEffect }, "tl3")
   .to('.square-8 .square-overlay, .square-12 .square-overlay, .square-4 .square-overlay, .square-10 .square-overlay', transitionTime, { opacity: opacity, ease: easeEffect }, "tl3")
   
   .to('.square-13 .square-inner', transitionTime, { rotationY: -degrees, ease: easeEffect }, "tl4")
   .to('.square-9 .square-inner', transitionTime, { rotationX: degrees, ease: easeEffect }, "tl4")
   .to('.square-15 .square-inner', transitionTime, { rotationY: degrees, ease: easeEffect }, "tl4")
   .to('.square-13 .square-overlay, .square-9 .square-overlay, .square-15 .square-overlay', transitionTime, { opacity: opacity, ease: easeEffect }, "tl4")

   .to('.square-14 .square-inner', transitionTime, { rotationX: degrees, ease: easeEffect }, "tl5")
   .to('.square-14 .square-overlay', transitionTime, { opacity: opacity, ease: easeEffect }, "tl5");

}

PageTransition.prototype.resize = function() {

    squareW = Math.floor(site.Width / 5);
    squareH = Math.floor(site.Height / 3);

    $('.square').width(squareW).height(squareH);
}

site.pt = new PageTransition();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/TweenMax.min.js