JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="cube cube_1"></div>
  <div class="cube cube_2"></div>
  <div class="cube cube_3"></div>
</div>

CSS

body {
  margin: 0;
  overflow: hidden;
}
div.box {
  width: 100%;
  position: relative;
}
div.box:after {
  content: '';
  display: table;
  clear:both;
}
div.box1 {
  width: 25%;
  float: left;
  height: 100vh;
  background: grey;
  background: url(https://images.unsplash.com/photo-1530075288903-69b220251c3e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=032bc1890fe094136025465c66302731&w=1000&q=80);
  background-size: cover;
  background-position: center;
  visibility: hidden;
  animation: two 1s cubic-bezier(0, 0, 0.23, 0.99) forwards .2s;
}
div.box2 {
  width: 75%;
  float: left;
  height: 100vh;
  background: url(http://imgs.abduzeedo.com/files/articles/35_black_wallpapers/08.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  animation: one 1s cubic-bezier(0, 0, 0.23, 0.99) forwards;
}
@keyframes one {
  from {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    transform: translateX(30%);
  }
  to {
    -webkit-clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
    clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
    transform: translateX(0%);
  }
}
@keyframes two {
  from {
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transform: translateX(-30%);
    visibility: visible;
  }
  to {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translateX(0);
    visibility: visible;
  }
}
div.cube {
  width: 100px;
  height: 100px;
  background: white;
  position: absolute;
  transform: translateY(-100%);
  animation: cube 1s ease-out forwards;
}
div.cube_1 {
  left: 20.5%;
  animation-delay: 0.8s;
}
div.cube_2 {
  left: 40.5%;
  animation-delay: 1s;
}
div.cube_3 {
  left: 61.5%;
  animation-delay: 1.2s;
}
@keyframes cube {
  100%{ transform: translateY(0);}
}