gsap toArray, forEach

gsap 배열 반복 

gsap.utils.toArray(".s2ul li").forEach(function(card){
        
})

.s2 ul{display: flex; gap: 30px;flex-direction: column; }
.s2 ul li{position: relative; display: flex; align-items: center; justify-content: center; background-image: url(img/1.jpg);
   margin-bottom: 50px; width:300px; height: 350px; overflow: hidden; }
.s2 ul li::before{content: '';width: 100%; height: 100%; background-color: gold;
 position: absolute; left: 0; top: 0; transition: all 0.3s; transition-delay: 0.3s; z-index: 10;}
 .s2 ul li::after{content: '' ; width: 100%; height: 100%; position: absolute; left: 0; top: 0; 
 background-color: #222; transition: all 0.3s; z-index: 11;}
.s2 ul li.active{margin-bottom: 0;}
.s2 ul li.active::before{height: 0;}
.s2 ul li.active::after{height: 0;}

$(function(){
    gsap.registerPlugin(ScrollTrigger);
    
    gsap.utils.toArray(".s2ul li").forEach(function(card){
        gsap.timeline({
            scrollTrigger:{
                trigger:card,
                start:"50% 90%",
                toggleClass:{"targets":card, className:"active"},
                scrub:1,
                markers:true
            }
        })
    })
});