<script type="text/javascript" src="/static/common/plugins/gsap/3.7.1/gsap.min.js"></script><script type="text/javascript" src="/static/common/plugins/gsap/3.7.1/ScrollTrigger.min.js"></script> <style type="text/css">@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css'); .trend-editer-wrap { min-width: 1440px; width: 100%; font-family: Pretendard, sans-serif !important; } @-webkit-keyframes opacityin { 0% { opacity: 0; } 1%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } @keyframes opacityin { 0% { opacity: 0; } 1%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } .trend-editer-wrap .trend-main { position: relative; height: 600px; margin: 0 auto; } .trend-editer-wrap .trend-main .img-box { position: relative; width: 100%; height: 100%; background-color: #808080; } .trend-editer-wrap .trend-main .img-box::after { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-image: url("https://image.a-rt.com//art/display/webzine/202412/1733808761130.png"); background-repeat: no-repeat; background-size: contain; background-position: center; } .trend-editer-wrap .trend-main .img-box .bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .trend-editer-wrap .trend-main .img-box .bg-img:nth-of-type(2) { opacity: 0; -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-name: opacityin; animation-name: opacityin; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .trend-editer-wrap .trend-main .img-box .bg-img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .trend-editer-wrap .trend-main .text-box { position: absolute; z-index: 1; bottom: 0; width: 100%; padding: 0 75px 50px; text-align: center; color: #fff; } .trend-editer-wrap .trend-main .rec { gap: 15px; top: 80px; } .trend-editer-wrap .trend-main .rec::before { width: 24px; height: 24px; } .trend-editer-wrap .trend-cont { position: relative; } .trend-editer-wrap .trend-cont .inner { position: relative; width: 1420px; margin: 0 auto; } .trend-editer-wrap .trend-cont.intro { padding: 80px 0; } .trend-editer-wrap .trend-cont.intro .inner { padding-top: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .trend-editer-wrap .trend-cont.intro .img-box { width: 240px; height: 120px; } .trend-editer-wrap .trend-cont.review { padding: 200px 0; } .trend-editer-wrap .trend-cont.review .video-box { -ms-flex-negative: 0; flex-shrink: 0; width: 483px; height: 744px; } .trend-editer-wrap .trend-cont.review .video-box video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .trend-editer-wrap .trend-cont.review .img-box { width: 602px; height: 420px; margin-top: 104px; } .trend-editer-wrap .trend-cont.review .img-box2 { position: relative; width: 342px; height: 522px; } .trend-editer-wrap .trend-cont.review .img-box2 .img-link { position: absolute; width: 34px; height: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cg data-name='Group 1658' transform='translate(3107.293 5002.293)'%3E%3Ccircle cx='17' cy='17' r='17' data-name='Ellipse 19' opacity='.46' transform='translate(-3107.293 -5002.293)'/%3E%3Cpath fill='%23fff' d='M-3091.701-4977.255h2.782v-6.664h6.664v-2.782h-6.664v-6.634h-2.782v6.629h-6.628v2.782h6.629Z' data-name='Path 74'/%3E%3C/g%3E%3C/svg%3E"); } .trend-editer-wrap .trend-cont.review .text-box { margin-top: 30px; margin-left: -52px; } .trend-editer-wrap .trend-cont.review .text-box2 .text { height: 135px; margin-top: 50px; } .trend-editer-wrap .trend-cont.review .d-flex:nth-of-type(2) { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 18px; margin-top: 120px; } .trend-editer-wrap .trend-cont.styling { padding: 200px 0; } .trend-editer-wrap .trend-cont.styling .text-box { position: absolute; z-index: 1; top: -80px; } .trend-editer-wrap .trend-cont.styling .text-box2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; height: 220px; margin: 325px auto 0 30px; } .trend-editer-wrap .trend-cont.styling .text-box3 { margin-top: 33px; margin-left: 143px; } .trend-editer-wrap .trend-cont.styling .img-box { width: 400px; height: 615px; } .trend-editer-wrap .trend-cont.styling .img-box2 { width: 300px; height: 460px; margin-top: -120px; } .trend-editer-wrap .trend-cont.styling .slide-box { width: 500px; margin-top: 150px; } .trend-editer-wrap .trend-cont.styling .swiper-slide img { width: 500px; height: 744px; } .trend-editer-wrap .trend-cont.selection { padding: 120px 0 200px; } .trend-editer-wrap .trend-cont.selection .text-box { margin-bottom: 30px; } .trend-editer-wrap .trend-cont.selection .text-box2 { margin-left: auto; margin-bottom: 87px; } .trend-editer-wrap .trend-cont.selection .text-box2 .text { width: 726px; height: 75px; color: #FFF5E3; } .trend-editer-wrap .trend-cont.selection .text-box3 { margin-bottom: 39px; } .trend-editer-wrap .trend-cont.selection .text-box4 { margin-top: 50px; } .trend-editer-wrap .trend-cont.selection .text-box4 .text { font-size: 15px; line-height: 29px; letter-spacing: 0; color: #fff; } .trend-editer-wrap .trend-cont.selection .swiper-slide img { width: 410px; height: 300px; } .trend-editer-wrap .trend-cont.selection .slide-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 410px; } .trend-editer-wrap .trend-cont.selection .d-flex { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .trend-editer-wrap .trend-cont.selection .rec { color: #FFF5E3; } .trend-editer-wrap .trend-cont.selection .slide-box { width: 100%; } .trend-editer-wrap .trend-cont .motion-type1, .trend-editer-wrap .trend-cont .motion-type2 { opacity: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .trend-editer-wrap .trend-cont [class*="img-box"] img, .trend-editer-wrap .trend-cont .slide-box img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .trend-editer-wrap .trend-tab { position: -webkit-sticky; position: sticky; z-index: 2; top: 99px; background-color: #000; } .trend-editer-wrap .trend-tab .tab-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 1420px; margin: 0 auto; } .trend-editer-wrap .trend-tab .tab-list .list-item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .trend-editer-wrap .trend-tab .tab-list .item-link { font-size: 18px; line-height: 25px; letter-spacing: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 40px; text-align: center; color: #fff; } .trend-editer-wrap .trend-tab .tab-list .item-link.active { background-color: #FF0000; } .trend-editer-wrap .trand-credit img { width: 100%; } .trend-editer-wrap .trand-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 60px; } .trend-editer-wrap .trand-btn .btn { width: 340px; height: 65px; font-family: Pretendard, sans-serif !important; font-weight: 700; line-height: 63px; } .trend-editer-wrap .d-flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .trend-editer-wrap .d-flex.column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column wrap; flex-flow: column wrap; } .trend-editer-wrap .mlAuto { margin-left: auto; } .trend-editer-wrap .rec { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; position: absolute; z-index: 1; top: 78px; left: 75px; opacity: 0; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: opacityin; animation-name: opacityin; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .trend-editer-wrap .rec::before { content: ''; width: 12px; height: 12px; background-color: #FF0000; border-radius: 50%; } .trend-editer-wrap .rec svg, .trend-editer-wrap .rec p { font-size: 15px; line-height: 18px; letter-spacing: 0; } .trend-editer-wrap .text { font-size: 18px; line-height: 25px; letter-spacing: 0; } .trend-editer-wrap .slide-box .swiper-pagination-bullets { bottom: 15px; } .trend-editer-wrap .slide-box .swiper-pagination-bullet { width: 9px; height: 9px; background: #fff; opacity: 1; } .trend-editer-wrap .slide-box .swiper-pagination-bullet-active { background: #FF0000; } @media screen and (min-width:1440px) { .trend-editer-wrap .trend-main{height: min(41.667vw,800px);} } </style> <div class="trend-editer-wrap"> <section class="trend-main"> <div class="rec"><img height="20" src="https://image.a-rt.com//art/display/webzine/202412/1733805883157.png" width="47" /></div> <div class="img-box"> <div class="bg-img"><img src="https://image.a-rt.com//art/display/webzine/202504/1745468386572.jpg?fitting=large|1920:800" /></div> <div class="bg-img"><img src="https://image.a-rt.com//art/display/webzine/202504/1745475467224.png?fitting=large|1920:800" /></div> </div> <div class="text-box"> <p class="text"><strong>두 번째 시선, 휠라 발레코어 슈즈</strong><br /> 봄 내음 가득한 실물 리뷰를 확인하세요.</p> </div> </section> <div class="trend-tab"> <ul class="tab-list"> <li class="list-item"><a class="item-link" href="#review">REVIEW</a></li> <li class="list-item"><a class="item-link" href="#styling">STYLING</a></li> <li class="list-item"><a class="item-link" href="#selection">SELECTION</a></li> <li class="list-item"><a class="item-link" href="#event">ITEM</a></li> </ul> </div> <section class="trend-cont intro" id="intro" style="background-color: #FFF5E3;"> <div class="rec"> <p>INTRO</p> </div> <div class="inner"> <div class="img-box motion-type1"><img src="https://image.a-rt.com//art/display/webzine/202504/1745474553351.png" /></div> <div class="text-box"> <p class="text">따뜻한 기온과 산뜻한 공기가 이어지는 요즘,<br /> 가볍고 트렌디한 슈즈가 필요한 시즌입니다. 다양한 실루엣과<br /> 소재의 조화를 이룬 휠라 스프링 데일리 슈즈 컬렉션은<br /> 봄 데일리룩에 자연스럽게 녹아드는 스타일을 제안합니다.</p> </div> </div> </section> <section class="trend-cont review" id="review"> <div class="rec"> <p>REVIEW</p> </div> <div class="inner"> <div class="d-flex"> <div class="video-box motion-type2"> <video autoplay="" class="video" controls="" id="videoPlayer" loop="" muted="" playsinline="" preload=""><source src="http://api.wecandeo.com/video/default/BOKNS9AQWrHQg7ii9ipD2jMWlwNOz6xais35tYoLV80z8qisF0LgBIZF0fMxzxNx4FQQ73iszKMwYvipAOuucJotiiduwieie.mp4" /></video> </div> <div class="d-felx column mlAuto"> <div class="img-box motion-type2"><img src="https://image.a-rt.com//art/display/webzine/202504/1745468571189.jpg" /></div> <div class="text-box"><img height="85" src="https://image.a-rt.com//art/display/webzine/202504/1745478395517.png " width="670" /></div> <div class="text-box2 motion-type2"> <p class="text">벨크로 스트랩과 스트링 디테일로<br /> 스포티하면서도 여성스러운 에샤페 벨크로 V2,<br /> 사랑스러운 핑크 컬러의 판테라와 인터런,<br /> 그리고 휠라의 베스트셀러 에샤페까지.<br /> 일상 속 발레코어 감성을 담은 슈즈를 만나보세요.</p> </div> </div> </div> <div class="d-flex"> <div class="img-box2 motion-type2"><a class="img-link" href="https://grandstage.a-rt.com/product/new?prdtNo=1020114072" style="top: 325px; left: 250px"><span class="hide">상품링크</span></a> <img src="https://image.a-rt.com//art/display/webzine/202504/1745814829221.png" /></div> <div class="img-box2 motion-type2"><a class="img-link" href="https://grandstage.a-rt.com/product/new?prdtNo=1020111674" style="top: 350px; left: 120px"><span class="hide">상품링크</span></a> <img src="https://image.a-rt.com//art/display/webzine/202504/1745814829224.png" /></div> <div class="img-box2 motion-type2"><a class="img-link" href="https://grandstage.a-rt.com/product/new?prdtNo=1020111892" style="top: 295px; left: 250px"><span class="hide">상품링크</span></a> <img src="https://image.a-rt.com//art/display/webzine/202504/1745814829225.png" /></div> </div> </div> </section> <section class="trend-cont styling" id="styling" style="background-color: #FFF5E3;"> <div class="inner"> <div class="text-box"><img height="157" src="https://image.a-rt.com//art/display/webzine/202412/1733806918559.png" width="806" /></div> <div class="d-flex column"> <div class="d-flex "> <div class="img-box motion-type2"><img src="https://image.a-rt.com//art/display/webzine/202504/1745468730012.jpg" /></div> <div class="text-box2 motion-type2"> <p class="text">● 톤온톤 또는 모노톤 컬러매치를 통해 정돈된 스타일링<br /> ● 프릴 디테일 원피스와 레이어드하여 빈티지 러블리 무드 연출<br /> ● 벌룬 스커트, 나일론 롱 스커트와 믹스매치하여 페미닌하게 연출<br /> ● 가볍고 얇은 바람막이와 쇼츠로 애슬레저 스타일링<br /> ● 정 사이즈 추천, 단 발등이 높은 경우 반 사이즈 업 권장</p> </div> <div class="slide-box motion-type2"> <div class="swiper-container"> <ul class="swiper-wrapper"> <li class="swiper-slide"><a href="https://grandstage.a-rt.com/product/new?prdtNo=1020114072"><img src="https://image.a-rt.com//art/display/webzine/202504/1745814864482.png" /> </a></li> <li class="swiper-slide"><a href="https://grandstage.a-rt.com/product/new?prdtNo=1020114071"><img src="https://image.a-rt.com//art/display/webzine/202504/1745814864487.png" /> </a></li> <li class="swiper-slide"><a href="https://grandstage.a-rt.com/product/new?prdtNo=1020111892"><img src="https://image.a-rt.com//art/display/webzine/202504/1745814864532.png" /> </a></li> <li class="swiper-slide"><a href="https://grandstage.a-rt.com/product/new?prdtNo=1020111674"><img src="https://image.a-rt.com//art/display/webzine/202504/1745814864551.png" /> </a></li> </ul> <div class="swiper-pagination">&nbsp;</div> </div> </div> </div> <div class="d-flex mlAuto"> <div class="img-box2 motion-type2"><img src="https://image.a-rt.com//art/display/webzine/202504/1745814953053.png" /></div> <div class="text-box3"><img height="157" src="https://image.a-rt.com//art/display/webzine/202501/1736842912580.png" width="407" /></div> </div> </div> </div> </section> <section class="trend-cont selection" id="selection" style="background-color: #191919;"> <div class="inner"> <div class="d-flex column"> <div class="text-box"><img height="156" src="https://image.a-rt.com//art/display/webzine/202504/1745480312478.png" width="1044" /></div> <div class="text-box2 motion-type2"> <p class="text">자신만의 멋과 색깔을 표현하고 싶은 분들에게<br /> 추천하는 휠라 스니커즈의 또 다른 발견.</p> </div> <div class="d-flex"> <div class="slide-wrap"> <div class="text-box3"><img height="48" src="https://image.a-rt.com//art/display/webzine/202504/1745468909644.png" width="148" /></div> <div class="slide-box motion-type2"> <div class="swiper-container"> <ul class="swiper-wrapper"> <li class="swiper-slide"><a href="https://grandstage.a-rt.com/product/new?prdtNo=1020111674"><img src="https://image.a-rt.com//art/display/webzine/202504/1745468927762.png" /> </a></li> <li class="swiper-slide"><a href="https://grandstage.a-rt.com/product/new?prdtNo=1020111674"><img src="https://image.a-rt.com//art/display/webzine/202504/1745468927700.jpg" /> </a></li> </ul> <div class="swiper-pagination">&nbsp;</div> </div> </div> <div class="text-box4"> <p class="text">1020의 선택을 받은 에샤페, 데일리 컬러와<br /> 트렌디한 무드로 자유롭게 스타일링하세요.</p> </div> </div> <div class="slide-wrap"> <div class="text-box3"><img height="46" src="https://image.a-rt.com//art/display/webzine/202504/1745468980219.png" width="283" /></div> <div class="slide-box motion-type2"> <div class="swiper-container"> <ul class="swiper-wrapper"> <li class="swiper-slide"><a href="https://grandstage.a-rt.com/product/new?prdtNo=1020114073"><img src="https://image.a-rt.com//art/display/webzine/202504/1745468990510.jpg" /> </a></li> <li class="swiper-slide"><a href="https://grandstage.a-rt.com/product/new?prdtNo=1020114073"><img src="https://image.a-rt.com//art/display/webzine/202504/1745468990560.png" /> </a></li> <li class="swiper-slide"><a href="https://grandstage.a-rt.com/product/new?prdtNo=1020114072"><img src="https://image.a-rt.com//art/display/webzine/202504/1745468990561.png" /> </a></li> <li class="swiper-slide"><a href="https://grandstage.a-rt.com/product/new?prdtNo=1020114071"><img src="https://image.a-rt.com//art/display/webzine/202504/1745469050871.png" /> </a></li> </ul> <div class="swiper-pagination">&nbsp;</div> </div> </div> <div class="text-box4"> <p class="text">에샤페 벨크로, 메리제인의 감성을 담아<br /> 캐주얼하게 활용할 수 있는 스니커즈입니다.</p> </div> </div> <div class="slide-wrap"> <div class="text-box3"><img height="48" src="https://image.a-rt.com//art/display/webzine/202504/1745469090859.png" width="362" /></div> <div class="slide-box motion-type2"> <div class="swiper-container"> <ul class="swiper-wrapper"> <li class="swiper-slide"><a href="https://grandstage.a-rt.com/product/new?prdtNo=1020111892"><img src="https://image.a-rt.com//art/display/webzine/202504/1745469111558.png" /> </a></li> <li class="swiper-slide"><a href="https://grandstage.a-rt.com/product/new?prdtNo=1020111892"><img src="https://image.a-rt.com//art/display/webzine/202504/1745469111638.png" /> </a></li> <li class="swiper-slide"><a href="https://grandstage.a-rt.com/product/new?prdtNo=1020105386"><img src="https://image.a-rt.com//art/display/webzine/202504/1745469111575.png" /> </a></li> <li class="swiper-slide"><a href="https://grandstage.a-rt.com/product/new?prdtNo=1020105386"><img src="https://image.a-rt.com//art/display/webzine/202504/1745469111583.png" /> </a></li> </ul> <div class="swiper-pagination">&nbsp;</div> </div> </div> <div class="text-box4"> <p class="text">슬림한 라인과 청키한 디테일의 판테라&amp;인터런.<br /> 사랑스러운 핑크 컬러로 생기를 더하세요.</p> </div> </div> </div> </div> </div> </section> <section class="trend-cont event" id="event"> <div class="trand-credit"><img alt="" src="https://image.a-rt.com//art/display/webzine/202504/1745815170102.png" /></div> <div class="trand-btn"><a class="btn btn-lg btn-line" href="https://grandstage.a-rt.com/product/brand/page/main?brandNo=000125&amp;page=1">휠라 브랜드관 바로가기 &gt;</a><a class="btn btn-lg btn-line" href="https://www.a-rt.com/display/webzine/trend">더 많은 매거진 보러가기 &gt;</a></div> </section> </div> <script> $(document).ready(function () { var scrolling = false; // 스크롤 상태 관리 플래그 // 탭 클릭 및 스크롤 이벤트를 통합 function updateActiveTab(targetId) { $('.tab-list a').removeClass('active'); if (targetId) { // 대상 ID가 있을 때만 active 추가 $('.tab-list a[href="#' + targetId + '"]').addClass('active'); } } // 스크롤 위치에 따른 활성 탭 업데이트 function onScroll() { if (!scrolling) { scrolling = true; var scrollPosition = $(window).scrollTop(); var activeTabFound = false; if (scrollPosition === 0) { var firstSectionId = $('.trend-cont').first().attr('id'); updateActiveTab(firstSectionId); activeTabFound = true; } else { $('.trend-cont').each(function () { var sectionOffset = $(this).offset().top - 139; var sectionHeight = $(this).outerHeight(); var sectionId = $(this).attr('id'); if (scrollPosition >= sectionOffset && scrollPosition < sectionOffset + sectionHeight) { updateActiveTab(sectionId); activeTabFound = true; return false; // 현재 섹션을 찾으면 루프 종료 } }); } if (!activeTabFound) { // trend-cont를 모두 벗어난 경우 active 제거 updateActiveTab(null); } setTimeout(function () { scrolling = false; }, 100); } } // 탭 클릭 이벤트 처리 $('.tab-list a').on('click', function (event) { if (this.hash !== "") { event.preventDefault(); scrolling = true; var targetId = this.hash.substring(1); $('html, body').animate({ scrollTop: $('#' + targetId).offset().top - 138 }, 300, 'easeInOutExpo', function () { scrolling = false; }); updateActiveTab(targetId); } }); // 스크롤 이벤트 처리 $(window).on('scroll', onScroll); // siwper 이벤트 $('.slide-box').each(function(index, element) { var $this = $(element); var influencerSwiper = new Swiper($this.find('.swiper-container'), { allowTouchMove: true,loop:true, resistanceRatio: 0, watchSlidesProgress: true, spaceBetween: 20, pagination: { el: '.swiper-pagination', clickable: true, } }); }); // 비디오 재생 var videoBoxes = document.querySelectorAll('.video-box'); if (videoBoxes.length > 0) { var observerOptions = { root: null, threshold: 0.5, }; var observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { var video = entry.target.querySelector('video'); if (entry.isIntersecting && entry.intersectionRatio >= 0.5) { playActiveVideo(video); } else { pauseVideo(video); } }); }, observerOptions); videoBoxes.forEach((box) => { observer.observe(box); }); } // 활성 비디오 재생 function playActiveVideo(video) { if (video && video.paused) { video.currentTime = 0; video.play(); } } // 비디오 멈추기 function pauseVideo(video) { if (video) { video.pause(); video.currentTime = 0; } } // gsap js gsap.registerPlugin(ScrollTrigger); ScrollTrigger.defaults({ markers: false }); $(".motion-type1").each(function(index) { var triggerElement = $(this); var targetElement = $(this); var tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, start: "top bottom", end: "+=40%", scrub: 1, toggleActions: "play none none none", once: true } }); tl.to(targetElement, { y: "-50px", opacity: 1, duration: 1 }); }); $(".trend-cont").each(function() { var container = $(this); var motionElements = container.find(".motion-type2"); motionElements.each(function(index) { var targetElement = $(this); var tl = gsap.timeline({ scrollTrigger: { trigger: container, start: `top+=${200 + index * 160} bottom`, end: "+=40%", scrub: 1, toggleActions: "play none none none", once: true // markers: true // 디버깅용 마커 } }); tl.to(targetElement, { opacity: 1, duration: 1, delay: index * 1.2 }); }); }); }); </script>