JSFiddle - React, Tailwind, and code Playground

HTML

<!--START THE MAIN CONTAINER-->
<div id="box" class='box_container'>

        <!--START THE IMAGE PARTS HOLDER-->
        <div id="imageHolder" class='images_holder'>

            <!--INSERT THE SAME IMAGE IN 2 DIVS, THEY BOTH HAVE image_div CLASS AND left OR right CLASS DEPENDING ON POSITION-->
            <div class='image_div left'><canvas id="canvas1" style="width:100%; height:100%;"/></div>
            <div class='image_div right'><canvas id="canvas2" style="width:100%; height:100%;"/></div>

            <!-- WE USED CSS FLOAT PROPERY, SO WE NEED TO CLEAR NOW-->
            <div class='clear'></div>
  
        </div>
        <!--END THE IMAGE PARTS HOLDER-->

        <!--START THE TEXT-->
        <div id="underneath" style="height: 400px;">
        The text underneath
        </div>
        <!--END THE TEXT-->
</div>
<!--END THE MAIN CONTAINER-->

CSS

.box_container{
        position:relative; /* important */
        width:100%; /* we must set a specific width of the container, so it doesn't strech when the image starts moving */
        height:100%; /* important */
        /*min-width: 100%;*/
        /*min-height: 100%;*/
        overflow:hidden; /* hide the content that goes out of the div */
        /*just styling bellow*/
        background: black;
        color:white;
    }
    .images_holder
    {
        width: 100%;
        height: 100%;
        position:absolute; /* this is important, so the div is positioned on top of the text */
    }
    .image_div {
        position:relative; /* important so we can work with the left or right indent */
        overflow:hidden; /* hide the content outside the div (this is how we will hide the part of the image) */
        width:50%; /* make it 50% of the whole images_holder */
        height: 100%;
        float:left; /* make then inline */
    }
    .right img{
        margin-left: -100%; /* 100% is in this case 50% of the image, so this is how we show the second part of the image */
    }
    .clear{
        clear:both;    
    }

JavaScript

$(document).ready(function () {
        var cv, box, holder, cvContext, width, height, my_gradient, boxHeight, boxWidth;

        //        box = document.getElementById("box");
        //        boxWidth = box.offsetWidth;
        //        boxHeight = box.offsetHeight;

        //        holder = document.getElementById("imageHolder");
        //        holder.width = boxWidth;
        //        holder.hieght = boxHeight;

        box = document.getElementById("box");
        //$("box").css({ width: $(window).width(), height: $(window).height() });
        $("box").css({ width: window.innerWidth, height: window.innerHeight });
        $("imageHolder").css({ 'min-width': window.innerWidth, 'min-height': window.innerHeight });

        cv = document.getElementById("canvas1");
        width = cv.width;
        height = cv.height;
        cvContext = cv.getContext("2d");
        my_gradient = cvContext.createLinearGradient(0, 0, width, height);
        my_gradient.addColorStop(0, "blue");
        my_gradient.addColorStop(1, "white");
        cvContext.fillStyle = my_gradient;
        cvContext.fillRect(0, 0, width, height);

        cv = document.getElementById("canvas2");
        width = cv.width;
        height = cv.height;
        cvContext = cv.getContext("2d");
        my_gradient = cvContext.createLinearGradient(0, 0, width, height);
        my_gradient.addColorStop(0, "blue");
        my_gradient.addColorStop(1, "white");
        cvContext.fillStyle = my_gradient;
        cvContext.fillRect(0, 0, width, height);

        //when the user hovers over the div that contains our html...
        $('.box_container').hover(function () {
            //... we get the width of the div and split it by 2  ...
            var width = $(this).outerWidth() / 2;
            /*... and using that width we move the left "part" of the image to left and right "part"
            to right by changing it's indent from left side or right side... */
           ...