Move a div and remove it to release content behind

Question

.atras{
  display: flex;
  flex: 1;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.frente{
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  height: 100vh;
  width: 100vw;
  
  justify-content: center;
  align-items: center;
  background: #aaa;
  }   

<div class="atras">  
  <a href="#">abrir div </a>
</div>


<div class="frente">  
  <a href="#">fechar div</a>
</div>

wanted to make an animation here

when clicking the exit button the div that is in front scrolls to the right and disappears. by clicking the button open the div right turn until occupying the screen.

Answer 1

Here is a simple example with pure js. You have to take the clicked link and make a classList.add or classList.remove. The class you will add has a left 100% and scaleX(0) this will play to div out of the screen. But not to create a horizontal scroll bar you have to put overflow-x: hidden in the body. To make the effect smooth, place a transition in div that will go off the screen.

Dry the code from the image above:

const out = document.querySelector('.frente > a');
const on = document.querySelector('.atras > a');

out.addEventListener('click', sai);
on.addEventListener('click', entra);

function sai() {
    const frente = document.querySelector('.frente');
    frente.classList.add('out')
}

function entra() {
    const frente = document.querySelector('.frente');
    frente.classList.remove('out')
}

html, body {
    overflow-x: hidden;
}

.atras {
    display: flex;
    flex: 1;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

.frente {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    height: 100vh;
    width: 100vw;

    justify-content: center;
    align-items: center;
    background: #aaa;

    transform-origin: right;
    left: 0;
    transition: all 500ms;
}

.frente.out {
    left: 100%;
    transform: scaleX(0);
}

<div class="atras">
    <a href="#">abrir div </a>
</div>


<div class="frente">
    <a href="#">fechar div</a>
</div>

Answer 2

You can do it this way:

First change the position of div.frente of absolute for fixed to avoid the horizontal scrollbar when moving it out of the window, and add the property transition that will make the animation in CSS:

.frente{
   position: fixed; /* POSITION ALTERADO */
   top: 0;
   right: 0;
   display: flex;
   height: 100vh;
   width: 100vw;

   justify-content: center;
   align-items: center;
   background: #aaa;

   transition: right .5s ease-in; /* ANIMAÇÃO */
}

Now create a class for the div where the right will be -100vw, causing the div to move out of the screen on the right:

.frente.sai{
   right: -100vw;
}

When the div.frente win the class .sai, will fire the transition, where you can adjust the time and type of transition: put .5s, which are 500 milliseconds or half a second, and ease-in (a list of types of transitions you can see in this document).

Put a class in tags <a> "open div" and "close div" which will greatly facilitate the JS code and will prevent other links you may have on the page from activating the animation. Put the same class in both tags. In the example below I put the class .controle:

<div class="atras">  
   <a class="controle" href="#">abrir div </a>
</div>

<div class="frente">  
   <a class="controle" href="#">fechar div</a>
</div>

Done that, just make one toggle class .sai in div.frente. A toggle basically is to insert/remove the class of the element each time it is called.

In jQuery would look like this:

$(".controle").on("click", function(e){
   e.preventDefault();
   $(".frente").toggleClass("sai");
});

In pure JS like this:

const controles = document.querySelectorAll(".controle");
for(let el of controles){
   el.onclick = function(e){
      e.preventDefault();
      document.querySelector(".frente").classList.toggle("sai");
   }
}

The e.preventDefault(); is to prevent the href="#" add the hash # at the bottom of the page URL.

I’ll put an example below using jQuery, but you can switch to the pure JS version if you want:

$(".controle").on("click", function(e){
   e.preventDefault();
   $(".frente").toggleClass("sai");
});

.atras{
  display: flex;
  flex: 1;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.frente{
   position: fixed;
   top: 0;
   right: 0;
   display: flex;
   height: 100vh;
   width: 100vw;
   
   justify-content: center;
   align-items: center;
   background: #aaa;
   
   transition: right .5s ease-in;
}

.frente.sai{
   right: -100vw;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="atras">  
   <a class="controle" href="#">abrir div </a>
</div>

<div class="frente">  
   <a class="controle" href="#">fechar div</a>
</div>