JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myDiv"><img src="http://www.cadeau-maestro.com/1847-7362-thickbox_default/recharge-plante-click-and-grow-.jpg" width="300" /></div>

CSS

body { 
height:1500px;
}

#myDiv {
    position:absolute;
    overflow:hidden;
    left:0;
    top:500px;
    height:0px;
    width:0px;
    background-color:#458963;
    color:#00f;
}

JavaScript

$(function(){
    $(window).on('scroll', function() {
        var $myDiv = $('#myDiv');
        var st = window.scrollY;
        var $myDivTop = ($myDiv.position().top) - 300;
        if ( st >= $myDivTop && st <= ($myDivTop + 300) ) {
            $myDiv.animate({'width':+(st-$myDivTop)+'px','height':+(st-$myDivTop)+'px' }, 10);
        }
        
        else if (st <= $myDivTop) {
            $myDiv.animate({'width':'0px','height':'0px' }, 10);
        }
        
        else if (st >= ($myDivTop + 300) ) {
            $myDiv.animate({'width':'300px','height':'300px' }, 10);
        }
    })
    .scroll();                     
})