JSFiddle - React, Tailwind, and code Playground

by verygreen

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 <div id="inner">
      <div id="one" class="boxWrapper"></div>
      <div id="two" class="boxWrapper boxWrapper2"></div>
</div>

CSS

#one {
    border: 2px solid red;
  }
  
  #two {
    border: 2px solid blue;
  }
  

.boxWrapper {
    position: absolute;
    height: 20vmin;
    width: 224vmin;
    z-index: 1102;
    white-space: nowrap;
    top: 5.5vmin;
    right: 100vmin;
    transition: none;
  }
  
.boxWrapper.start {
    transition: right linear 35s;
    right: calc(-144vmin - 80vmin - 200vmin);
  }
  
.boxWrapper.boxWrapper2.start {
    transform: translateX(-224vmin);
    transition: right linear 35s;
    right: calc(-144vmin - 80vmin - 200vmin);
  }

JavaScript

var boxWrap = $('#one');
  var boxWrap2 = $('#two');

  boxWrap.addClass('start')
  boxWrap2.addClass('start')
  
boxWrap.on("transitionend", function () {
    boxWrap.removeClass('start');
    boxWrap[0].offsetTop
    boxWrap.addClass('start');
    console.log(boxWrap.position())
})

boxWrap2.on("transitionend", function () {
    boxWrap2.removeClass('start');
    boxWrap2[0].offsetTop
    boxWrap2.addClass('start');
    console.log(boxWrap2.position())
})