JSFiddle - React, Tailwind, and code Playground

by rigor789

HTML

<div class="Stuff">
  <div class="Wall Wall--left"></div>
  <div class="Wall Wall--right"></div>
  
  <div class="Diamond"></div>
</div>

CSS

html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.Diamond {
  width: 400px;
  height: 400px;
  background: red;
  position: absolute;
  top: -400px;
  left: 50vw;
  margin-left: -200px;
  margin-top: -200px;
  transition: all 1s cubic-bezier(0.950, 0.050, 0.795, 0.035);
  transition-delay: .5s;
}

.Stuff {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.Wall {
  width: 50vw;
  height: 100vh;
  position: absolute;
  top: 0;
  transition: all .5s cubic-bezier(0.950, 0.050, 0.795, 0.035);
}

.Wall--left {
  left: -50vw;
  background: url('http://ftextures.com/textures/Wood-wall-texture.jpg');
  background-size: cover;
}

.Wall--right {
  right: -50vw;
  background: url('http://ftextures.com/textures/Wood-wall-texture.jpg');
  background-size: cover;
}

.Stuff--closed .Wall--left {
  left: 0;
}

.Stuff--closed .Wall--right {
  right: 0;
}


.Stuff--closed .Diamond {
  top: 50vh;
}

JavaScript

setTimeout(function() {
	var stuff = document.querySelector('.Stuff')
  console.log(stuff)
  stuff.className += ' Stuff--closed'
  
  setTimeout(function() {
  	stuff.className = 'Stuff'
  }, 10000);
}, 1000)