JSFiddle - React, Tailwind, and code Playground

HTML

<section style="background-color: red">1</section>
<section class="reveal" style="background-color: yellow">2</section>
<section class="reveal" style="background-color: orange">3</section>
<section class="reveal" style="background-color: pink">4</section>

CSS

section {
  height: 900px;
  color: white;
  padding: 40px;
  position: relative;
}

JavaScript

var $Window 								= $(window);

var offset_amount           = 400;
var window_height           = $Window.height();
var window_half             = (window_height/2);

var sections   							= $('SECTION.reveal');

sections.each(function() {

    var element = $(this);

    // Make sure we always start with the right offset
    element.css({top: offset_amount});
   

    $Window.bind('scroll', function() {

        var viewport_top    = $Window.scrollTop();
        var viewport_middle = viewport_top + (window_height/2)
        var viewport_bottom = viewport_top + window_height;
        var element_top     = element.offset().top;

        if (element_top > viewport_top &&  element_top <= viewport_bottom) {

            var distance_to_middle  = (element_top - viewport_middle);
            var amount_to_middle    = (distance_to_middle / window_half);

            console.log(amount_to_middle);

            if (amount_to_middle >= 0) {
                element.css({top: (offset_amount * amount_to_middle)+ 'px'});
            } else {
                // ? Lock to end position ?
            }



        }

    });

});