세로 스크롤에 따라 카드들이 순차적으로 고정되며 확대되는 스택 효과. GSAP ScrollTrigger를 활용한 인터랙티브 디자인 예제입니다.
이 예제는 사용자가 페이지를 스크롤할 때 카드들이 하나씩 고정되면서 부드럽게 확대되는 스택(Stacking) 애니메이션 효과를 구현합니다. 각 카드가 화면 중앙에 도달하면 잠시 고정되었다가 다음 카드가 이어지는 방식으로 자연스러운 흐름을 보여주며, GSAP의 ScrollTrigger와 ScrollSmoother 플러그인을 활용하여 스크롤 위치와 애니메이션이 매끄럽게 동기화됩니다.
HTML 구조
<main>
<h1>Stacking Card</h1>
<div class="stacking">
<div class="stacking__card">
<h2>Title</h2>
<div class="stacking__content">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur error, reiciendis enim nulla voluptate non aspernatur rem dicta alias perspiciatis qui nobis ratione similique incidunt magnam ut commodi quae eaque!</p>
</div>
</div>
<div class="stacking__card" style="background-color: #d6e684;">
<h2>Title</h2>
<div class="stacking__content">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur error, reiciendis enim nulla voluptate non aspernatur rem dicta alias perspiciatis qui nobis ratione similique incidunt magnam ut commodi quae eaque!</p>
</div>
</div>
<div class="stacking__card" style="background-color: #4fc1ed;">
<h2>Title</h2>
<div class="stacking__content">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur error, reiciendis enim nulla voluptate non aspernatur rem dicta alias perspiciatis qui nobis ratione similique incidunt magnam ut commodi quae eaque!</p>
</div>
</div>
</div>
<section class="container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto eum iste est aspernatur dolorum corporis hic tenetur labore voluptas dolor vitae numquam consectetur autem obcaecati quisquam ipsam eveniet, ad veritatis.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto eum iste est aspernatur dolorum corporis hic tenetur labore voluptas dolor vitae numquam consectetur autem obcaecati quisquam ipsam eveniet, ad veritatis.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto eum iste est aspernatur dolorum corporis hic tenetur labore voluptas dolor vitae numquam consectetur autem obcaecati quisquam ipsam eveniet, ad veritatis.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto eum iste est aspernatur dolorum corporis hic tenetur labore voluptas dolor vitae numquam consectetur autem obcaecati quisquam ipsam eveniet, ad veritatis.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto eum iste est aspernatur dolorum corporis hic tenetur labore voluptas dolor vitae numquam consectetur autem obcaecati quisquam ipsam eveniet, ad veritatis.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto eum iste est aspernatur dolorum corporis hic tenetur labore voluptas dolor vitae numquam consectetur autem obcaecati quisquam ipsam eveniet, ad veritatis.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto eum iste est aspernatur dolorum corporis hic tenetur labore voluptas dolor vitae numquam consectetur autem obcaecati quisquam ipsam eveniet, ad veritatis.</p>
</section>
</main>
CSS 소스
@function pxToRem($pixel) {
@return $pixel / 16 + rem;
}
:root {
--black: #1f1f1f;
--white: #fff;
}
body {
background-color: var(--black);
color: var(--white);
}
main {
padding: pxToRem(50) 0;
}
h1 {
color: var(--white);
font-size: clamp(3.125rem, 17.321vw + -1.357rem, 12.5rem);
line-height: clamp(4.688rem, 21.363vw + -0.84rem, 16.25rem);
margin: pxToRem(100) 0;
text-align: center;
}
h2 {
font-size: clamp(1.5rem, 1.848vw + 1.022rem, 2.5rem);
line-height: clamp(2.25rem, 1.848vw + 1.772rem, 3.25rem);
}
.stacking {
position: relative;
}
.stacking__card {
background-color: var(--white);
border-radius: pxToRem(32);
color: var(--black);
display: flex;
flex-direction: column;
gap: var(--whatwedo-gap);
margin: 25vh auto;
max-width: pxToRem(1020);
padding: pxToRem(32) pxToRem(32) 0;
}
.stacking__content {
font-size: pxToRem(18);
margin: pxToRem(20) 0;
padding-bottom: pxToRem(20);
}
.container {
max-width: pxToRem(800);
margin: 0 auto;
}
p {
margin: pxToRem(20) 0;
}
JS 소스
gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
ScrollSmoother.create({
smooth: 1,
effects: true,
normalizeScroll: true
});
const cards = gsap.utils.toArray(".stacking__card");
const spacer = 50;
cards.forEach((card, index) => {
ScrollTrigger.create({
trigger: card,
start: `center-=${index * spacer} center`,
endTrigger: ".stacking",
end: `bottom center`,
pin: true,
pinSpacing: false,
// markers: true,
invalidateOnRefresh: true
});
const scaleValue = 0.85 + index * 0.05;
gsap.to(card, {
scrollTrigger: {
trigger: card,
start: `top center`,
end: `bottom center`,
scrub: true,
// markers: true,
invalidateOnRefresh: true
},
// ease: "none",
scale: scaleValue
});
});
