JSFiddle - React, Tailwind, and code Playground

HTML

<section class="top"></section>
<section class="wrap">
  <img class="zoom" src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F5b8fd21c9bd74e9cb07b8a44c1e93649" >
</section>
<section class="bottom"></section>

CSS

.zoom {
  position: sticky;
  top: 20vh;
  will-change: transform;
  width: 100%;
  transform: scale(2.2);
}

.bottom {
  height: 100vh;
}

.top {
  height: 80vh;
}

.wrap {
  height: 200vh;
}

JavaScript

const zoom = document.querySelector('.zoom');
const minZoom = 1;
const maxZoom = 2;

addEventListener('scroll', e => {
	const vh = window.innerHeight / 100;
  const scrollTop = document.documentElement.scrollTop;
  const start = 100 * vh;
  const stop = 200 * vh;
  if (scrollTop > start && scrollTop < stop) {
	  const scale = Math.max(2.2 - (scrollTop - start) / 500, 1);
  	zoom.style.transform = `scale(${scale})`
  }
})