GSAPを使用したスクロールトリガーアニメーションを作成したいです

  <div class="container">
    <div class="page-content">
		<div class="mainvisual-section" id="mvSection">
			Main Visual
		</div>
		<div class="maincontents" id="mainContents">
			<h2>Main Contents</h2>
        <p>テキストがここに入ります</p>

        <div class="content-block">Block1</div>
        <div class="content-block">Block2</div>
        <div class="content-block">Block3</div>
      </div>

    </div><!-- /.page-content -->
  </div><!-- /.container -->

body{
	height:100%;
	overflow:hidden;
}

div.pageWrap{
	position: relative;
	width:100%;
	text-align:left;
}

.container{
	position:relative;
	width:100%;
}

.page-content{
	position:relative;
}

.mainvisual-section {
	position: fixed;
	top: 0; 
	left: 0;
	width: 100vw; 
	height: 100%;
	background: #333; 
	color: #fff;
	display: flex; 
 	align-items: center; 
 	justify-content: center;
 	font-size: 2rem;
 	z-index: 10;
	transform: translate3d(0, 0, 0);
	
	&.is-active{
		transform: translate3d(0, -50%, 0);
	}
}

.maincontents {
	position: relative;
	width: 100%;
	min-height: 200vh; 
	background: #fff;
	box-sizing: border-box;
	padding: 2rem;
	translate3d(0, calc(100dvh + 1px), 0)
	
	&.is-active{
		transform: translate3d(0, 0, 0);
	}
}

.content-block {
	height: 400px; 
	margin: 1rem 0; 
	background: #ddd;
	display: flex; 
	align-items: center; 
	justify-content: center;
	font-size: 1.2rem;
}

$(function(){
	$('body').css({
		height: '100%',
		overflow: 'hidden'
	});
	
	let currentStage = 0; 
	let animating = false;
	
	$(document).on('wheel.transformOnly', function(e){
		e.preventDefault();
		if(animating) return;
		
		const delta = e.originalEvent.deltaY;
		
		if(delta > 0 && currentStage === 0) {
			currentStage = 1;
			animating = true;
			
			gsap.to("#mvSection", {
				duration: 1.2,
				yPercent: -50,
				ease: "power3.inOut"
			});
			
			gsap.to("#mainContents", {
				duration: 1.2,
				y: 0,
				ease: "power3.inOut",
				onComplete: function() {
					if(currentStage === 1) {
						$('body').css({
							height: 'auto',
							overflowY: 'scroll'
						});
					}
					animating = false;
				}
			});
		} else if(delta < 0 && currentStage === 1) {
			if($(window).scrollTop() === 0) {
				currentStage = 0;
				animating = true;
				
				$('body').css({
					height: '100%',
					overflow: 'hidden'
				});
				gsap.to("#mvSection", {
					duration: 1.2,
					yPercent: 0,
					ease: "power3.inOut"
				});
				
				gsap.to("#mainContents", {
					duration: 1.2,
					y: window.innerHeight,
					ease: "power3.inOut",
					onComplete: function(){
						animating = false;
					}
				});
			}
		}
	});
});