<section class="demo">
<div class="demo__copy">
<h2 class="demo__title">Still type in a moving frame</h2>
</div>
<figure class="demo__media demo__media--left" aria-hidden="true"></figure>
<figure class="demo__media demo__media--right" aria-hidden="true"></figure>
</section>.demo {
position: relative;
min-height: 220vh;
background: #0c0c0e;
color: #f2f2f0;
overflow: hidden;
font-family: "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
}
.demo__copy {
position: sticky;
top: 0;
z-index: 2;
height: 100vh;
display: grid;
place-items: center;
padding: 0 22vw;
text-align: center;
pointer-events: none;
}
.demo__title {
margin: 0;
max-width: 9em;
font-size: clamp(40px, 7vw, 84px);
font-weight: 600;
letter-spacing: -0.055em;
line-height: 1.02;
text-wrap: balance;
}
.demo__media {
position: absolute;
z-index: 1;
border-radius: 18px;
overflow: hidden;
background-size: cover;
background-position: center;
box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
filter: grayscale(0.28) contrast(1.06) saturate(0.78);
}
.demo__media--left {
left: 7vw;
top: 16vh;
width: min(30vw, 260px);
height: min(42vh, 360px);
transform: rotate(-7deg);
background-color: #2c2a26;
background-image: url("https://picsum.photos/seed/atelier-left/900/1200");
}
.demo__media--right {
right: 7vw;
top: 46vh;
width: min(34vw, 300px);
height: min(46vh, 400px);
z-index: 3;
transform: rotate(6deg);
background-color: #1f211f;
background-image: url("https://picsum.photos/seed/atelier-right/900/1200");
}
@media (max-width: 720px) {
.demo__copy { padding: 0 18px; }
.demo__media--left,
.demo__media--right {
width: 38vw;
height: 28vh;
}
}const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const left = document.querySelector(".demo__media--left");
const right = document.querySelector(".demo__media--right");
const title = document.querySelector(".demo__title");
if (!reduce) {
gsap.to(left, {
yPercent: -28,
ease: "none",
scrollTrigger: { trigger: ".demo", start: "top top", end: "bottom bottom", scrub: 1.1 },
});
gsap.to(right, {
yPercent: 36,
ease: "none",
scrollTrigger: { trigger: ".demo", start: "top top", end: "bottom bottom", scrub: 0.7 },
});
gsap.to(title, {
yPercent: 12,
ease: "none",
scrollTrigger: { trigger: ".demo", start: "top top", end: "bottom bottom", scrub: 1.4 },
});
}
