Gsap integration after webflow interaction

Design help Custom code
1

For horizontal scroll i am using web flow interactions and in next section i am using gsap for animation you can see how images are displaying in horizontal scroll

https://6july.webflow.io/services-1

let blocks = document.querySelectorAll(“.blocks”);
let duration = 0.25;
let repeatDelay = 0.075 * (blocks.length - 1);

        // Define the scroll-triggered animation timeline
        let landingPageScrollTrigger = gsap.timeline({
            scrollTrigger: {
                trigger: ".gallery-image",
                start: "0% 0%", 
                end:"200% 0%",
                pin: ".gallery-image", 
                markers: true,
                scrub: 4, 
                onLeave: () => {
        // Optional: Reset layout adjustments when leaving
        document.querySelector(".gallery-image").style.transform = "none";
    }
            }
        });

// Initial animation for #codeby: scale up and increase opacity

// Sequentially fade out spans within #codeby

        // Animate the blocks
        landingPageScrollTrigger.from(".blocks", 2, {
            scale: 0.4,
            opacity:0,
            top: "50%",
            left: "50%",
            transform: "translateZ(-200px)",
            stagger: {
                each: duration,
                repeatDelay: repeatDelay,
            },
        });
        landingPageScrollTrigger.to(".blocks",{
            
            opacity:1,
            
            
        });
        landingPageScrollTrigger.to(".blocks",{
            
            opacity:0.5,
            
            
        });
        
        landingPageScrollTrigger.to(".blocks", {
    opacity: 0,
    duration: 1,
    ease: "power1.in",
});

this is the code iam using for animation along with this there is another gsap animation section intially