JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="container">
  <div class="object passive"></div>
</div>
<button>hey</button>

CSS

body {
  margin: 0;
  overflow-x: hidden;
}
div.container {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #eee;
}
div.object {
  width: 60%;
  height: 100%;
  position: absolute;
  background: grey;
  right: 0;
  top: 0;
  transition: 1s;
  background: url(https://picsum.photos/400) no-repeat;
  background-size: cover;
  background-position: center;
  backface-visibility: hidden;
  transform: translatex(40%) scale(0.5);
}
div.object.passive {
  animation: a cubic-bezier(0.63, 0.04, 0.2, 1.02) 1s both;
}
button {
  position: fixed;
}
@keyframes a {
  /* 50% { transform: translateX(10%) scale(0.7) } */
  100%{ transform: translateX(0) scale(1) }
}

JavaScript

function offset(el) {
    var rect = el.getBoundingClientRect(),
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    console.log(rect.top + scrollTop , rect.left + scrollLeft , rect.width , rect.height );
    return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}
/* offset(document.querySelector('div')) */
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
	document.querySelector('.object').classList.toggle('passive');
})