<div class="box"></div>
	<div class="clip_svg">
		<svg width="1512" height="1110" fill="none" viewBox="0 0 1512 1110">
			<clipPath id="clipOpening" clipPathUnits="objectBoundingBox">
				<path class="js-clip-svg" fill="#FF9800"
					d="M 0 0 V 1110 C 197 1110 463 1110 756 1110 C 1048 1110 1314 1110 1512 1110 V 0 H 0 Z"
					transform="scale(0.00066,0.0009)" />
			</clipPath>
		</svg>
	</div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js" ></script>
 
 
 

.box {
  background-color: blue;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	clip-path: url('#clipOpening');
}

.clip_svg {
	width: 0;
	height: 0;
  & svg{
    width:0;
    height:0;
  }
}

let pathAfter =
		'M 0 0 V -300 C 165 -155 360 -85 749 -85 C 1150 -85 1361 -165 1512 -300 V 0 H 0 Z';
let pathBefore = document.querySelector('.js-clip-svg');
const tl = gsap.timeline();
tl.to(
		pathBefore,
		{
			duration: 1,
			attr: { d: pathAfter },
			delay: 1,
		}

)