Image slide out effect v2

Inspired by https://tympanus.net/Development/SlideOutBoxMenu/

by Julien Roche

HTML

<body class="layout">
  <section class="layout__content">
    <div class="slide-container slide-container--left">
      <div class="slide-container__image slide-container__image--image1"></div>
    </div>
    <div class="slide-container slide-container--right">
      <div class="slide-container__image slide-container__image--image2"></div>
    </div>
  </section>
  <footer class="layout__footer">
    <button type="button">Side in motion</button>
  </footer>
</body>

CSS

html,
body {
  border: none;
  height: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  width: 100%;
}


.layout {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.layout__content {
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
}

.layout__footer {
  background-color: black;
  flex: 0 0 auto;
  height: 3rem;
  line-height: 3rem;
  text-align: center;
}


.slide-container {
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
}

.slide-container--right {
   left: 100%;
}

.slide-container__image {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.slide-container__image--image1 {
  background-image: url(https://images.pexels.com/photos/289225/pexels-photo-289225.jpeg?auto=compress&cs=tinysrgb&h=650&w=940);
}

.slide-container__image--image2 {
  background-image: url(https://images.pexels.com/photos/762020/pexels-photo-762020.jpeg?auto=compress&cs=tinysrgb&h=650&w=940);
}

.slide-container--left.slide-container--move-slide {
  animation: moveSlide 1.5s ease-in 0s 1 normal forwards running;
}

.slide-container--right.slide-container--move-slide {
  animation: moveSlide2 1.5s ease-in 0s 1 normal forwards running;
}

.slide-container__image.slide-container__image--zoom {
  animation: zoomInOut 1.5s ease-in 0s 1 normal forwards running;
}

@keyframes moveSlide {
  0% {
    left: 0;
  }
  
  100% {
    left: -100%;
  }
}

@keyframes moveSlide2 {
  0% {
    left: 100%;
  }
  
  100% {
    left: 0;
  }
}

@keyframes zoomInOut {
  0% {
    transform: scale(1, 1);
  }
  
  50% {
    transform: scale(1.2, 1.2);
  }
  
  100% {
    transform: scale(1, 1);
  }
}

Babel + JSX

const buttonElement = document.querySelector('button');
const firstImageParentElement = document.querySelector('.slide-container--left');
const secondImageParentElement = document.querySelector('.slide-container--right');

const firstImageElement = firstImageParentElement.querySelector('.slide-container__image--image1');
const secondImageElement = secondImageParentElement.querySelector('.slide-container__image--image2');

buttonElement.addEventListener('click', (event) => {
	firstImageParentElement.classList.toggle('slide-container--move-slide');
  firstImageElement.classList.toggle('slide-container__image--zoom');
  
  secondImageParentElement.classList.toggle('slide-container--move-slide');
  secondImageElement.classList.toggle('slide-container__image--zoom');

}, false);