JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
     <div class="doors1" id="element"></div>
     <div class="doors2" id="element2"></div>
</div>

CSS

#element
{
   
    width:100px;
    height:100px;
        background-image: url("http://www.habboxwiki.com/wiki/images/6/66/Glass_divider.png");
    margin: 0 auto;

}
#element2
{

    width:100px;
    height:100px;
    background-image: url("http://www.habboxwiki.com/wiki/images/6/66/Glass_divider.png");
    margin: 0 auto;
 
}

   .doors1{
       position: absolute;
   margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

} 
.doors2{
           position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

  
  
}

JavaScript

setTimeout(function(){
    $('#element').css('marginLeft', $('#element').position().left).animate({'marginLeft':($(document).width())+'px'},1000, function(){$('#container').hide().html('')});    
}, 1000);

setTimeout(function(){
    $('#element2').css('marginRight', $('#element2').position().left).animate({'marginRight':($(document).width())+'px'},1000, function(){$('#container').hide().html('')});    
}, 1000);