Scroll trigger animation and color section

Hi. I am a new user of Enfold and I am using it to build my site.
I wanted to ask how I could make a scroll trigger animation (similar to what you see on Apple’s site) using a video.
Reading the Enfold documentation, I thought about making a colorsection with a video as the background and then using GSAP to play the video (https://youtu.be/J0gUOaSlQjs) when you scroll down the page, and have a text appear shortly after onto the video (such color section center-aligned content), but I’m not sure if this is the right way.
I currently have this code written, but when I go to test it I have enough problems, especially with the next color section overlapping this one:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/ScrollTrigger.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
	jQuery(document).ready(function(){
		const colorSection = "#litappliances"; // id of the color section
		const video = jQuery(colorSection).find("video")[0];
		const overlay = jQuery(colorSection).find(".av-section-color-overlay-wrap")[0];
		
		video.pause();
		video.currentTime = 0.01;

		let src = video.currentSrc || video.src;

		jQuery(document).on("touchstart", function(e){
			video.play();
			video.pause();
		});

		/* ---------------------------------- */
		/* Scroll Control! */

		gsap.registerPlugin(ScrollTrigger);

		jQuery(video).on("loadedmetadata", function() {
			let tl = gsap.timeline({
				defaults: { duration: 1 },
				scrollTrigger: {
					trigger: "#litappliances",
					start: "top top",
					end: "+=20%",
					pin: false,
					scrub: true
				}
			});
			
			tl.fromTo(video, { currentTime: 0 }, { currentTime: video.duration || 1 });
			let t2 = gsap.timeline({
				defaults: { duration: 1 },
				scrollTrigger: {
					trigger: "#litappliances",
					start: "top top",
					end: "+=20%",
					pin: true,
					scrub: true
				}
			});
			t2.fromTo(label, { opacity: 0 }, { opacity:1 });
		});
	});
</script>

How could I solve this? Thanks in advance for your attention!