JSFiddle - React, Tailwind, and code Playground

HTML

<div id="one" class="allDivs"></div>
<div id="two" class="allDivs">
  <div id="blueDiv"> </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.allDivs {
  width: 100%;
  height: 840px;
}

#one {
  background-color: pink;
}

#two {
  background-color: skyblue;
  position: relative;
}

#three {
  background-color: coral;
}

#blueDiv {
  width: 50%;
  height: 100px;
  background-color: blue;
  position: absolute;
  left:0;
  transition:left 2s linear;
}
#blueDiv.right {
  left:50%
}

JavaScript

$(window).scroll(function() {
	var offT = $('#two').offset().top - $(window).height(),
      scrT = $(window).scrollTop();
  if(scrT >= offT) {
  	$('#blueDiv').addClass('right')
  } else {
  	$('#blueDiv').removeClass('right')
  }
});