GSAP ScrollTrigger로 이미지가 펼쳐지며 텍스트를 밀어내는 스크롤 인터랙션 구현하기
CSS 26.08.07 조회 9GSAP ScrollTrigger로 이미지가 펼쳐지며 텍스트를 밀어내는 스크롤 인터랙션 구현하기
✅ 이미지 Reveal Animation이란?
이미지 Reveal Animation은 스크롤 위치에 따라 숨겨진 이미지 영역을 점진적으로 노출하여 이미지가 펼쳐지는 것처럼 표현하는 인터랙션입니다.
일반적으로 이미지를 확대하는 효과라고 생각하기 쉽지만, 이번 예제에서는 이미지 자체의 크기를 변경하지 않습니다.
scale()을 활용해 이미지를 확대하는 방식이 아닌, 이미지를 감싸고 있는 컨테이너 영역을 확장하여 숨겨진 이미지를 보여주는 방식으로 구현합니다.
✅ 이미지가 펼쳐지는 효과는 어떻게 구현할까?
✨ 핵심 원리: 이미지가 아니라 컨테이너를 확장!
· Reveal Animation의 핵심은 이미지 자체가 아니라 이미지를 보여주는 영역(Viewport)을 변경하는 것입니다.
· overflow:hidden 영역 → 영역 크기 증가 → 숨겨져 있던 이미지 노출 → 이미지가 펼쳐지는 것처럼 표현
✅ Reveal Animation 구조 살펴보기
· front__mask : 이미지를 담고 있으며, 사용자에게 보여지는 영역을 제어하는 창(Viewport) 역할을 합니다.
· overflow:hidden을 적용하면 영역 밖의 이미지는 숨겨지고, 컨테이너 크기가 변경될 때 이미지가 자연스럽게 노출됩니다.
1 2 3 4 5 6 7 8 9 10 | <style> .front__mask{overflow:hidden;} </style> <body> <div class="front__mask"> <div class="inner-bg"> <img src="image.jpg"> </div> </div> </body> | cs |
✅ 초기 상태 설정하기
· 애니메이션 시작 전, 이미지 영역의 크기를 0으로 설정합니다.
1 | gsap.set("#inc01 .front__mask",{maxWidth:0,height:0}); | cs |
✅ 이미지 영역 펼치기
· 이미지 영역을 뷰포트 크기까지 확장합니다.
1 | gsap.to("#inc01 .front__mask",{maxWidth:"100vw",height:"100vh"}); | cs |
✅ 텍스트가 밀려나는 효과 구현하기
· 이미지가 펼쳐질 때 위아래 텍스트가 자연스럽게 사라지도록 처리합니다.
· 실제로 텍스트 위치를 이동시키는 것이 아니라, 이미지 영역이 확장되고 텍스트 높이가 줄어들면서 밀려나는 듯한 시각적 효과를 만듭니다.
1 | gsap.to("#inc01 .front p",{autoAlpha:0,height:0}); | cs |
✅ 구현 방식에 따른 Reveal Animation 선택 기준
Reveal Animation은 디자인 형태에 따라 적절한 방식을 선택해야 합니다.
이번 예제에서 사용한 overflow:hidden 방식은 사각형, 원형처럼 CSS로 표현 가능한 형태에서 가장 간단하고 유지보수가 쉬운 방법입니다.
✅ 특정 모양이나 로고 형태 Reveal은 어떻게 구현할까?
다음과 같은 형태는 단순한 컨테이너 확장 방식으로 표현하기 어렵습니다.
이 경우에는 SVG와 함께 clip-path, mask 속성을 활용하는 방식이 적합합니다.
· 브랜드 로고 모양
· 물결 형태
· 브러시 효과
· 불규칙한 곡선 형태
· SVG 기반 Shape
✅ Reveal Animation과 CSS Mask의 차이
✔ CSS Mask 방식
· mask-image 사용 > 투명 영역 제어 > 이미지 자체를 마스킹
✔ Reveal Animation 방식
· overflow:hidden 사용 > 컨테이너 크기 변경 > 이미지 노출 영역 확장
➰➰➰
자주 묻는 질문 (FAQ)
Q. GSAP ScrollTrigger로 이미지가 펼쳐지는 효과는 어떻게 만드나요?
GSAP ScrollTrigger와 overflow:hidden을 활용해 이미지 컨테이너의 크기를 변경하면 이미지가 펼쳐지는 듯한 Reveal Animation을 구현할 수 있습니다.
Q. GSAP에서 이미지 확대 효과를 만드는 방법은?
이미지에 scale()을 적용하는 방법도 있지만, 자연스러운 화면 전환을 위해 이미지 영역을 확장하는 Reveal Animation 방식을 사용할 수 있습니다.
Q. Reveal Animation이란 무엇인가요?
Reveal Animation은 숨겨진 콘텐츠 영역을 확장하거나 이동시켜 요소가 나타나는 것처럼 표현하는 애니메이션 기법입니다.
Q. overflow:hidden과 clip-path는 언제 사용해야 하나요?
overflow:hidden은 사각형이나 원형처럼 단순한 형태의 Reveal 효과에 적합하며,
로고 형태나 불규칙한 Shape처럼 특정 모양이 필요한 경우에는 SVG 기반의 clip-path 또는 mask 방식을 사용하는 것이 적합합니다.
➰➰➰
GSAP ScrollTrigger를 활용한 이미지 Reveal Animation은 단순히 이미지를 확대하는 효과가 아닙니다.
이미지를 감싸고 있는 영역을 확장하여 숨겨진 이미지를 자연스럽게 드러내는 방식으로, 사용자는 이미지가 펼쳐지는 듯한 시각적 경험을 하게 됩니다.
overflow:hidden 기반 Reveal 구조는 구현이 간단하고 유지보수가 쉬워 기업 홈페이지, 랜딩페이지, 포트폴리오 등 다양한 웹 프로젝트에서 활용하기 좋은 인터랙션 패턴입니다.
복잡한 Shape이나 브랜드 로고 형태의 Reveal이 필요한 경우에는 SVG clip-path 또는 mask 방식을 활용하여 더욱 다양한 이미지 전환 효과를 구현할 수 있습니다.
See the Pen 배경 svg path Mask by designkits (@designkits) on CodePen.
⚡함께 보면 좋은 링크⚡
