JSFiddle - React, Tailwind, and code Playground

by kyllle

HTML

<div class="levels js-levels">
  <div class="level level--one"></div>
  <div class="level level--two"></div>
</div>

<button class="js-slide">Click</button>

SCSS

.level {  
  position: absolute;
  top: 0;
  left: 0;
  transition: transform .6s ease;
  
  &--one {    
    .toggle & {
      transform: translate(-100%);
    }
  }
  
  &--two {
    transform: translateX(100%);
    
    .toggle & {
      transform: translateX(0);
    }
  }
}

JavaScript

console.clear();$('.js-slide').on('click', function() {
	$('.js-levels').toggleClass('toggle-in');
});