JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box"></div>
<div class="img1"></div>
<div class="img2"></div>

CSS

body {
  overflow: hidden;
}
div.box {
  width: 50vw;
  padding-top: 20%;
  margin: 10px 20px 15px;
  background: red;
  z-index: 2;
  position: relative;
  animation: luka 2s cubic-bezier(0.65, 0.01, 0, 0.99)
 forwards;
}
@keyframes luka {
  100% {
    transform: translateX(102vw);
  }
}
div.img1 {
  width: 100%;
  height: 100%;
  background: url(https://picsum.photos/1920/1080);
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
}
div.img2 {
  width: 100%;
  height: 100%;
  background: url(https://picsum.photos/1921/1080);
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  animation: demo 1.3s cubic-bezier(0.42, 0, 0, 0.99)
 forwards .7s;
}
@keyframes demo {
  from {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
}