<div class="wrap">
	<div class="pScaleImage js-scale-area">

		<div class="pScaleImage__item js-scale-target">
		</div>

	</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
 
</div>

.wrap{
	height: 300vh;
	width: 100vw;
}

.pScaleImage {
	--padding-top: 0;
	width: 100vw;
	height: 100vh;
	padding-top: var(--padding-top);
	position: relative;
	margin-top: 2vh;


	&__item {

		--clip:50%;
    overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		clip-path: inset(0 0 var(--clip) 0);
		transform-origin: top left;
		background-color: #8be4f0;
		background-image:
				linear-gradient(180deg, #fff 50%, transparent 50%);
			background-size: 23vw 23vw;

		& img {
				height: 100%;
			}
	}
}

gsap.fromTo(
		'.js-scale-target',
		{
			scale: 0.1,
			'--clip': '50%',

		},
		{
			scale: 1,
			'--clip': '0',


			scrollTrigger: {
				trigger: '.js-scale-area',
				start: 'top top',
				end: 'bottom 30%',
				scrub: 1,
				pin: true,
				markers: true,
			},
		}
	);