Elementor Amazing Background Scroll Effect With GSAP

				
					<script>		
		;(function(){
    let chck_if_gsap_loaded = setInterval(function(){
			const eleBuilder = document.querySelector('body').classList.contains("elementor-editor-active");
       if(window.gsap && window.ScrollTrigger && !eleBuilder){
            gsap.registerPlugin(ScrollTrigger);
            change_background();	
            clearInterval(chck_if_gsap_loaded);
        }
    }, 500);

function change_background(){							
	
const tl = gsap.timeline({ 
    	scrollTrigger: {
      trigger: ".start-bg-trigger",  // Start class
			endTrigger:".end-bg-trigger",	// End class
      start: "top center", // Start marker
			end:"bottom center", // End marker
			toggleActions:'restart reverse restart reverse',		// onEnter onLeave onEnterBack OnLeaveBack
			duration:0.5
    	}				
});
tl.to('body', {backgroundColor: '#fff', duration:0.2}); // Main Background color 		
tl.to(".header-bg-gsap", {backgroundColor: '#fff', duration:0.2}, "<");	// Header Background color 
tl.to(".gsap-menu .elementor-menu-toggle", {color: '#000'}, "<");	// Mobile toggle icon color 
tl.to(".change-logo img", { attr: { src: '' } }, "<"); // change header logo
tl.to(".bg-scroll-text h1", {color: '#191B21'}, "<"); // Text color class	
tl.to(".bg-scroll-text h2", {color: '#191B21'}, "<");	
tl.to(".bg-scroll-text h3", {color: '#191B21'}, "<");
tl.to(".bg-scroll-text h4", {color: '#191B21'}, "<");
tl.to(".bg-scroll-text p", {color: '#191B21'}, "<");
tl.to(".bg-scroll-text a", {color: '#191B21'}, "<");	
tl.to(".bg-scroll-text span", {color: '#191B21'}, "<");	
			
    }	
})();
	
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/ScrollTrigger.min.js"></script>