패럴랙스 스크롤 푸터

SectionFooter는 130vh 풀스크린 배경 이미지 위에 heading · subtitle · description이 순차적으로 드러나는 시네마틱 푸터 섹션입니다. 상단 그라디언트 마스크가 이전 섹션과의 자연스러운 경계를 만듭니다.

Background Image

풀스크린 배경 · yPercent 패럴랙스

Top Mask

상단 그라디언트 페이드 마스크

Heading

SplitText chars · yPercent reveal

Subtitle

추적 텍스트 · y:120 페이드인

Description

설명 텍스트 · y:80 페이드인

SectionFooter는 하나의 컴포넌트 안에서 Next/Image · SplitText · 4개의 독립 ScrollTrigger를 조합하여 패럴랙스 푸터를 구현합니다. gsap.context()로 모든 트리거를 묶어 라이프사이클을 관리합니다.

마운트 시 gsap.context() 안에서 4개의 setup 함수가 순차 실행됩니다. 각 함수는 독립된 ScrollTrigger를 생성하고, 스크롤 위치에 따라 이미지와 텍스트가 렌더됩니다.

ANIMATION OUTPUT

Image

패럴랙스

yPercent: 0 → 20

Heading

글자 reveal

yPercent: 100 → 0, stagger 0.2

Subtitle

페이드인

y: 120 → 0 + opacity

Description

페이드인

y: 80 → 0 + opacity

4개의 독립된 ScrollTrigger가 서로 다른 스크롤 구간에서 작동합니다. 배경 이미지는 전체 구간에 걸쳐 패럴랙스되고, 텍스트 요소들은 상단부터 순차적으로 드러나는 시네마틱 연출입니다.

섹션이 뷰포트에 진입하면 4개의 독립 ScrollTrigger가 병렬로 작동합니다. 각 트리거는 서로 다른 start/end 위치에서 scrub로 연결되어, 스크롤 위치에 따라 이미지와 텍스트가 자연스럽게 드러납니다.

단순한 패럴랙스 푸터가 아니라, 독립된 ScrollTrigger 관리와 라이프사이클 안전성을 갖춘 프로덕션 레벨 패턴입니다. 4개의 트리거가 각각 다른 구간에서 동작하면서도 하나의 context로 묶여 있습니다.

Image Parallax

배경 이미지 패럴랙스

Next/Image fill + object-cover 위에 gsap.to yPercent:20을 scrub로 연결하여 자연스러운 깊이감 연출

gsap.to(imgWrap, { yPercent: 20, scrollTrigger: { scrub: true } })

Char Reveal

글자별 순차 등장

SplitText chars에 yPercent:100에서 0으로 stagger 0.2 적용 — 글자가 아래에서 한 글자씩 올라오는 효과

stagger: 0.2 yPercent: 100 → 0 scrub: 1

Independent Triggers

독립 ScrollTrigger

이미지·제목·부제·설명 4개가 각각 독립된 ScrollTrigger를 가져 서로 다른 타이밍에 등장

start: 'top 50%' // heading start: 'top 30%' // subtitle start: 'top 10%' // desc

Fade Mask

상단 그라디언트 마스크

배경 이미지 상단에 bg-linear-to-b 그라디언트를 오버레이하여 이전 섹션과 자연스러운 경계 생성

bg-linear-to-b from-light to-transparent h-1/8 위치

GSAP Context

라이프사이클 관리

4개의 독립된 ScrollTrigger + SplitText를 gsap.context()로 묶어 언마운트 시 한 번에 정리

const ctx = gsap.context(() => { // 4 setup functions }, section) return () => ctx.revert()

Scroll Staging

순차 등장 연출

heading은 50%에서, subtitle은 30%에서, desc은 10%에서 시작하여 위에서부터 순차적으로 콘텐츠가 드러나는 시네마틱 연출

heading: top 50% → top 0% subtitle: top 30% → top 0% desc: top 10% → top 0%

데스크탑 퍼스트로 설계하고 max-xl · max-md 2단계 브레이크포인트만 사용합니다. 모바일에서는 헤딩 사이즈를 축소하고 이미지 object-position을 bottom으로 변경하여 핵심 콘텐츠를 유지합니다.