JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<button class="start">
 Start
</button>
<button class="end">
 End
</button>

<div class="div">
  <div class="block dv1 active">
    1
  </div>
  <div class="block dv2">
    2
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.div {
  position: relative;
  /* padding: 20px 100px; */
  /*display: flex;
  align-items: center;
  justify-content: center;*/
  width: 510px;
  height: 430px;
  margin: 0 auto;
}

.start,
.end {
  display: block;
  margin: 20px auto;
  height: 30px;
  width: 100px;
}

.block {
  position: absolute;
  top: 50%;
  /*transform: translateY(-50%);*/
  opacity: 0.5;
}
.dv1 {
  left: 0;
  transform: translate(0, -50%);
  
  width: 315px;
  height: 430px;
  background: blue;
  
  opacity: 1;
  z-index: 1;
  
  
  box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.2), 0px 0px 8px rgba(0, 0, 0, 0.1);
border-radius: 14px;
  
}
div.active {
  
}
.dv2 {
  left: 100%;
  transform: translate(-100%, -50%);
  
  width: 260px;
  height: 360px;
  background: green;
  z-index: 0;
  
  box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.2), 0px 0px 8px rgba(0, 0, 0, 0.1);
border-radius: 14px;
}

.dv1.animated-1 {
  animation: around-1 4s ease-in-out forwards;
  
  box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.2), 0px 0px 8px rgba(0, 0, 0, 0.1);
border-radius: 14px;
}
@keyframes around-1 {
  /*50% { transform: translate(-100%, -50%); }*/
  50% { left: 0; transform: translate(-1%, -50%); }
  100% { left: 100%; transform: translate(-100%, -50%);  width: 260px; height: 360px; opacity: 0.5; z-index: 0;}
}


.dv2.animated-2 {
  animation: around-2 4s ease-in-out forwards;
  
  box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.2), 0px 0px 8px rgba(0, 0, 0, 0.1);
border-radius: 14px;
}
@keyframes around-2 {
  /*50% { transform: translate(0%, -50%); opacity: 1; }*/
  50% { left: 0; transform: translate(101%, -50%); opacity: 1; }
  100% { left: 0px; transform: translate(0%, -50%); opacity: 1; z-index: 1; width: 315px; height: 430px; }
}










.dv1.animated-3 {
  left: 100%; transform: translate(-100%, -50%);  width: 260px; height: 360px; opacity: 0.5; z-index: 0;
  animation: around-3 4s ease-in-out forwards;
  
  box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.2), 0px 0px...

JavaScript

var btnNext = document.querySelector('.start');

        btnNext.addEventListener('click', scrollToNext);
        function scrollToNext() {
        		/*document.querySelector('.dv1').classList.remove("animated-3");
          	document.querySelector('.dv2').classList.remove("animated-4");*/
        
            document.querySelector('.dv1').classList += " animated-1";
            document.querySelector('.dv2').classList += " animated-2";
        }
        
        
        var btnNext2 = document.querySelector('.end');

        btnNext2.addEventListener('click', scrollToNext2);
        function scrollToNext2() {
        		/*document.querySelector('.dv1').classList.remove("animated-1");
          	document.querySelector('.dv2').classList.remove("animated-2");*/
          
            document.querySelector('.dv1').classList += " animated-3";
            document.querySelector('.dv2').classList += " animated-4";
        }