JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="main-door">
  <div class="backDoor">
    <div class="door"></div>
    <div class="shadow"></div>
  </div>
</div>

<div class="video-find-apartment"></div>

CSS

body {
  background: rgba(147, 192, 31,0.8);
  margin: 0;
}
.video-find-apartment {
  width: 300px;
  height: 300px;
  background: red;
  position: absolute;
  right: 0;
}
div#main-door {
  position: absolute;
  width: 177px;
  overflow: hidden;
  height: 231px;
}
div#main-door .backDoor {
  background-color: white;
  position: absolute;
  width: 76px;
  right: 20px;
  height: 130px;
  margin: 0 auto;
  margin-top: 50px;
}
div#main-door .door {
  background-color: rgb(147, 192, 31);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 76px;
  height: 130px;
  transform: perspective(500px) translateZ(0px) translateX(0px) translateY(0px) rotateY(0deg);
  transform-origin: left;
}
div#main-door .door.active {
  animation: _b .8s cubic-bezier(0.42, 0.01, 0.28, 0.99) forwards;
}
div#main-door .door.close {
  animation: _b_ .8s cubic-bezier(0.42, 0.01, 0.28, 0.99) forwards;
}
div#main-door .shadow {
  width: 232px;
  height: 51px;
  background: rgb(147, 192, 31);
  background: white;
  opacity: 0.6;
  position: absolute;
  top: 130px;
  right: -20px;
  -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
div#main-door .shadow.active {
  animation: _a .8s linear forwards;
}
div#main-door .shadow.close {
  animation: _a_ .8s linear forwards;
}
@keyframes _a {
  from {
    opacity: 0;
    -webkit-clip-path: polygon(89.2% 0, 91.3% 0%, 92% 100%, 89% 100%);
    clip-path: polygon(89.2% 0, 91.3% 0%, 92% 100%, 89% 100%);
  }
  35% {
    -webkit-clip-path: polygon(59.2% 0, 91.3% 0%, 96% 100%, 55% 100%);
    clip-path: polygon(59.2% 0, 91.3% 0%, 96% 100%, 55% 100%);
  }
  100% {
    opacity: 0.4;
    -webkit-clip-path: polygon(59.2% 0, 91.3% 0%, 100% 100%, -10% 100%);
    clip-path: polygon(59.2% 0, 91.3% 0%, 100% 100%, -10% 100%);
  }
}
@keyframes _a_ {
  from {
    opacity: 0.4;
    -webkit-clip-path: polygon(59.2% 0, 91.3% 0%, 100% 100%, -10% 100%);
    clip-path: polygon(59.2% 0, 91.3% 0%, 100%...

JavaScript

$('.video-find-apartment').hover(function(){
	$('div#main-door .door').addClass('active')
  $('div#main-door .door').removeClass('close')
	$('div#main-door .shadow').addClass('active')
  $('div#main-door .shadow').removeClass('close')
},function(){
	$('div#main-door .door').addClass('close')
  $('div#main-door .shadow').addClass('close')
})