gsap vertical

.s2ul{display: flex; gap: 30px; align-items: start; position: absolute; left: 30%;}
.s2ul li{position: relative; display: flex; align-items: center; justify-content: center; background-image: url(img/1.jpg); background-size: cover;
   margin-bottom: 50px; width:400px; height: 350px; }
.s2ul li a{display: block; background-color:black; color: #fff; font-size: 2rem; padding: 5px 25px;}

.s2ul li{clip-path: inset(30%);}
.s2ul li a{opacity: 0;}

<ul class="s2ul">
    <li><a href="#">text1</a></li>
    <li><a href="#">text1</a></li>
    <li><a href="#">text1</a></li>
    <li><a href="#">text1</a></li>
    <li><a href="#">text1</a></li>
    <li><a href="#">text1</a></li>
</ul>

gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.matchMedia({
    "(min-width:1024px)":function(){
        let list = gsap.utils.toArray(".s2ul li");
        let scrollTween = gsap.to(list, {
            xPercent: -100 * (list.length - 1),
            ease:"none",
            scrollTrigger:{
                trigger: ".s2",
                pin: true,  // 가로스크롤 
                scrub:2,
                start:"center center",
                end:"200%", // 클수록 속도 느려짐
                markers:true
            }
        })


        //center 커지기 
        gsap.utils.toArray(".s2ul li").forEach(function(imgbox){
        
            gsap.timeline({
                scrollTrigger: {
                    trigger: imgbox,
                    containerAnimation: scrollTween, //list 변수 
                    start:"center right",
                    end:"center 70%",
                    scrub:true,
                    markers:true
                }
            })
            .to(imgbox, {"clip-path":"inset(0%)",ease:"none", duration:"1"}, 0)
            
            //center 작아지기 
            gsap.timeline({
                scrollTrigger: {
                    trigger: imgbox,
                    containerAnimation: scrollTween, //list 변수 
                    start:"center 30%",
                    end:"center left",
                    scrub:true,
                    markers:true
                }
            })
            .to(imgbox, {"clip-path":"inset(30%)",ease:"none", duration:"1"}, 0)
        })

        //textbox center 커지기
        gsap.utils.toArray(".s2ul li a").forEach(function(textbox){
            gsap.timeline({
                scrollTrigger: {
                    trigger: textbox,
                    containerAnimation: scrollTween, //list 변수 
                    start:"center 70%",
                    end:"center 60%",
                    scrub:true,
                    markers:true
                }
            })
            .to(textbox, {"opacity":"1"}, 0)
            
            //textbox center 작아지기
            gsap.timeline({
                scrollTrigger: {
                    trigger: textbox,
                    containerAnimation: scrollTween, //list 변수 
                    start:"center 40%",
                    end:"center 30%",
                    scrub:true,
                    markers:true
                }
            })
            .to(textbox, {"opacity":"0"}, 0)
        })
    }
})