gsap 1

$(function(){
    gsap.registerPlugin(ScrollTrigger);
    gsap.timeline({
        scrollTrigger:{
            trigger: ".s2ul", //대상
            start: "top 90%", //대상의 탑과 브라우저의 90%가 만날때 
            end: "50% 100%" ,
            scrub: 1, //빠르기
            markers:true,
        }
    })
    // to :0% ~ 100% 진행, from은 -100% - 0% 진행, fromto -100% ~ 100% 전체, set 순식간에 
    .to('.s2ul li:nth-child(1)', {y:"-300px", duration:1, ease:"none"}, 0.6)  
    .to('.s2ul li:nth-child(2)', {y:"-300px", duration:1, ease:"none"}, 0.8) 

    gsap.timeline({
        scrollTrigger:{
            trigger: '.s4', 
            start: "top 50%", 
            end : "100% 100%", 
            scrub:2
        }
    })
    .fromTo(".s4 span.ca", {y:"400%"}, {y:"0"}, 1)
    .fromTo(".s4 span.cb", {y:"400%"}, {y:"0"}, 1.5)
    .fromTo(".s4 span.cc", {y:"400%"}, {y:"0"}, 1.6)
    .fromTo(".s4 span.cd", {y:"400%"}, {y:"0"}, 1.8)
    .fromTo(".s4 span.ce", {y:"400%"}, {y:"0"}, 2)
});

section{height: 100vh; width: 100%;  border: 1px solid blue; display: flex; align-items: center; justify-content: center;}
.s2 ul{display: flex; gap: 30px; align-items: center; justify-content: space-evenly; border: 1px solid yellow;}
.s2 ul li{display: flex; align-items: center; justify-content: center; border: 1px solid red ; width: 100px; height: 150px; }
.s4 {position: relative; width: 100vw; height: 100vh;;}
.s4 span {position: absolute; left: 50%; top: 50%; width: 150px; height: 200px;
background-color: hsl(calc((90deg * var(--index))), 40%, 50%); 
transform: translate(-50%, -50%) rotate( calc(( 10deg * var(--index) - 15deg )));}

<div class="wrap">
    <section class="s1">11</section>
    <section class="s2">
        <ul class="s2ul">
            <li>card</li>
            <li>card</li>
            <li>card</li>
            <li>card</li>
            <li>card</li>
            <li>card</li>
        </ul>
    </section>
    
    <section class="s4">
        <span class="ca" style="--index: 1;">card1</span>
        <span class="cb" style="--index: 2;">card1</span>
        <span class="cc" style="--index: 3;">card1</span>
        <span class="cd" style="--index: 4;">card1</span>
        <span class="ce" style="--index: 5;">card1</span>
    </section>
    <section></section>
</div>