<svg viewBox="0 0 350 200" class="mybox">
  <g class="squares">
    <rect class="square" x="0" y="75" width="50" height="50" />
    <rect class="square" x="60" y="75" width="50" height="50" />
    <rect class="square" x="120" y="75" width="50" height="50" />
    <rect class="square" x="180" y="75" width="50" height="50" />
    <rect class="square" x="240" y="75" width="50" height="50" />
    <rect class="square" x="300" y="75" width="50" height="50" />
  </g>
</svg>
body {
  background: rgba(random(256)-1, random(256)-1, random(256)-1, 0.5);
}

svg {
  width: 50%;
  visibility: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  rect {
    fill: rgb(random(256)-1, random(256)-1, random(256)-1);
    transform-origin: 50%, 50%;
  }
}
var getColor = function() {
  return "rgb(" + Math.random() * 255 + ", " + Math.random() * 255 + ", " + Math.random() * 255 + ")";
} 

TweenMax.set('.mybox', {
  'visibility': 'visible'
});

var tl = new TimelineMax();

tl.add('start');

tl.staggerTo(".squares rect", 1, {
  y: 50, 
  fill: getColor(), 
  rotationX: 180,
  ease: Power1.easeOut
}, 0.05)
.staggerTo(".squares rect", 2, {
  y: 0, 
  fill: getColor(), 
  rotationX: -180,
  ease: Power1.easeOut
}, 0.05, "-=0.5")
.staggerTo(".squares rect", 1, {
  y: 50, 
  fill: getColor(), 
  rotationX: 180,
  ease: Power1.easeIn
}, 0.05, "-=1.2");
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js