<section class="demo">
<div class="demo__spacer"></div>
<figure class="demo__figure">
<div class="demo__clip">
<div class="demo__media"></div>
</div>
<figcaption>
<span>Aurora / 2026</span>
<span>Scroll reveal</span>
</figcaption>
</figure>
<div class="demo__spacer"></div>
</section>.demo {
padding: 0 20px;
background: #08080a;
color: #f4f4f2;
font-family: "Helvetica Neue", Inter, system-ui, sans-serif;
}
.demo__spacer { height: 60vh; }
.demo__figure { margin: 0; }
.demo__clip {
height: 60vh;
border-radius: 16px;
overflow: hidden;
/* 아래에서 위로 열립니다 */
clip-path: inset(74% 0% 0% 0% round 16px);
}
.demo__media {
height: 130%;
margin-top: -15%;
background: linear-gradient(150deg, #6f7bd8, #e0705f 55%, #d8b26f);
will-change: transform;
}
.demo__figure figcaption {
display: flex;
justify-content: space-between;
margin-top: 14px;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #5a5a62;
}gsap.registerPlugin(ScrollTrigger);
// 1) 마스크가 열리는 구간
gsap.to(".demo__clip", {
clipPath: "inset(0% 0% 0% 0% round 16px)",
ease: "power2.out",
scrollTrigger: {
trigger: ".demo__figure",
start: "top 85%",
end: "top 35%",
scrub: true,
},
});
// 2) 안쪽은 반대로 밀어 깊이를 만듭니다 (패럴랙스).
gsap.fromTo(
".demo__media",
{ yPercent: -12 },
{
yPercent: 12,
ease: "none",
scrollTrigger: {
trigger: ".demo__figure",
start: "top bottom",
end: "bottom top",
scrub: true,
},
}
);
gsap.from(".demo__figure figcaption span", {
opacity: 0,
y: 10,
duration: 0.7,
ease: "power2.out",
stagger: 0.1,
scrollTrigger: { trigger: ".demo__figure", start: "top 55%" },
});
