효과 미리보기

패럴랙스 이미지

가벼움

스크롤하면 배경 사진이 본문보다 느리게 움직여 깊이감이 생긴다.

스크롤하면 배경이 본문보다 느리게 움직입니다

적용 대상	섹션 배경·대형 사진
트리거	ScrollTrigger scrub (top bottom → bottom top)
수치·구현	yPercent -8 → 8 · ease:none · transform만
모바일	±4로 축소 (과하면 멀미)
필요 이미지	1장

실제 페이지에서 보기 ↗

마그네틱 CTA 버튼

가벼움

커서가 다가가면 버튼이 살짝 끌려온다. 클릭 유도.

문의하기

커서를 버튼 가까이 가져가 보세요

적용 대상	주요 CTA 버튼
트리거	mousemove (데스크톱 전용)
수치·구현	gsap.quickTo x/y · 커서 거리 ×0.3 · duration .5 · power3
모바일	미적용 (터치엔 hover 없음)
필요 이미지	불필요

실제 페이지에서 보기 ↗

커스텀 커서(데스크톱)

가벼움

기본 커서 대신 브랜드 색 원. 이미지 위에서 커지며 라벨이 뜬다.

VIEW

이미지 위로 커서를 올려 보세요

적용 대상	전역 커서 + .zoomable 요소
트리거	mousemove / hover
수치·구현	quickTo 추종 · 기본 26px → hover 시 74px 확대 + 라벨 노출
모바일	미적용 (커서 숨김)
필요 이미지	불필요

실제 페이지에서 보기 ↗

3D 틸트 카드

가벼움

카드에 마우스를 올리면 원근감 있게 기울어진다.

카드

카드 위에서 마우스를 움직여 보세요

적용 대상	카드형 요소(메뉴·서비스)
트리거	mousemove / mouseleave
수치·구현	transformPerspective 900 · rotationX/Y ±5deg · duration .4
모바일	미적용 (perspective 해제)
필요 이미지	불필요

실제 페이지에서 보기 ↗

비포&애프터 비교 슬라이더

가벼움

손잡이를 밀면 시공 전/후가 갈라져 보인다.

BEFOREAFTER

가운데 손잡이를 좌우로 끌어 보세요

적용 대상	전/후 이미지 2장 겹침
트리거	Draggable(type:"x") + Inertia 드래그
수치·구현	clip-path inset으로 분할 · 손잡이 드래그 · 진입 시 흔들기로 조작 안내
모바일	유지 (allowNativeTouchScrolling:true 로 세로 스크롤 보존)
필요 이미지	2장

실제 페이지에서 보기 ↗

가로 드래그 스트립

가벼움

카드가 옆으로 흐른다. 손으로 잡고 던질 수 있다.

카드를 잡고 옆으로 밀어 보세요 (관성으로 미끄러집니다)

적용 대상	카드 트랙
트리거	Draggable(type:"x") + Inertia · 또는 핀+containerAnimation
수치·구현	snap: 카드 폭 단위 · ease:none · 트랙 폭 > 뷰포트 확보
모바일	overflow-x:auto + scroll-snap (손으로 밀기)
필요 이미지	3장

실제 페이지에서 보기 ↗

무한 키워드 마퀴

가벼움

키워드 띠가 끊임없이 흐른다. 스크롤 속도에 반응한다.

브랜드 키워드★강조 문구★슬로건★브랜드 키워드★강조 문구★슬로건★

키워드 띠가 끊임없이 흐릅니다

적용 대상	키워드 스트립
트리거	상시 재생 + 스크롤 velocity 반응
수치·구현	x: -50% · repeat:-1 · modifiers로 wrap · duration 18s
모바일	유지 (속도만 낮춤)
필요 이미지	불필요

실제 페이지에서 보기 ↗

듀오톤→컬러 이미지 호버

가벼움

썸네일이 흑백이다가 마우스를 올리면 컬러로 살아난다.

썸네일 위로 커서를 올려 보세요

적용 대상	썸네일·포트폴리오 이미지
트리거	hover (데스크톱)
수치·구현	filter: grayscale(1) → grayscale(0) · duration .5 · ⚠ transform 아님
모바일	기본 컬러로 고정
필요 이미지	불필요

실제 페이지에서 보기 ↗

줌 트랜지션

중간

섹션이 바뀔 때 사진이 서서히 조여든다.

스크롤하면 사진이 서서히 조여듭니다

적용 대상	섹션 전환 이미지
트리거	ScrollTrigger scrub
수치·구현	scale 1.16 → 1 · ease:none · will-change:transform
모바일	1.08 → 1 로 완화
필요 이미지	1장

실제 페이지에서 보기 ↗

비디오 배경(히어로)

중간

첫 화면 배경이 영상으로 재생된다.

VIDEO LOOP · muted · playsinline

첫 화면 배경이 영상으로 재생됩니다 (모바일은 poster 정지 이미지)

적용 대상	히어로 배경
트리거	자동재생 루프
수치·구현	muted playsinline loop · mp4+webm 2트랙 · 2MB 이하 · poster 필수
모바일	영상 대신 poster 정지 이미지 (데이터·배터리)
필요 이미지	1장

SVG 라인 드로잉(scrub)

중간

스크롤에 맞춰 선이 그려진다. 차트·경로·심전도 등.

스크롤에 맞춰 선이 그려집니다

적용 대상	SVG path (차트·경로·심전도 등)
트리거	ScrollTrigger scrub:1
수치·구현	DrawSVGPlugin drawSVG "0%" → "100%" · stroke·stroke-width 필수
모바일	핀 없이 진입 시 1회 재생 (duration 1.8s)
필요 이미지	불필요

실제 페이지에서 보기 ↗

이미지 시퀀스 스크럽(canvas)

무거움

스크롤로 영상처럼 프레임이 넘어간다. 제품 회전·분해에 쓴다.

01 / 05

스크롤하면 프레임이 넘어갑니다 (실제로는 120프레임)

적용 대상	canvas 프레임 시퀀스
트리거	핀 + scrub
수치·구현	120프레임 · WebP 프레임당 60KB 이하 · onUpdate에서 draw · 프리로드+인디케이터
모바일	60프레임 절반 세트 또는 mp4 scrub 대체
필요 이미지	프레임 120장 (영상 1개 → ffmpeg 추출)

실제 페이지에서 보기 ↗

스크롤 속도 기울기(velocity skew)

가벼움

빠르게 스크롤하면 요소가 살짝 기울고, 멈추면 제자리로 돌아온다. 속도가 눈에 보인다.

빠르게 스크롤할수록 카드가 더 기울어집니다

적용 대상	카드·이미지·섹션 블록
트리거	ScrollTrigger onUpdate → self.getVelocity()
수치·구현	skewY = clamp(-12,12, velocity/-260) · gsap.quickTo(".card","skewY",{duration:.5,ease:"power3"}) · 정지 시 0 복귀
모바일	±5deg 로 축소 (과하면 읽기 방해)
필요 이미지	불필요

실제 페이지에서 보기 ↗

커서 근접 확대 그리드

가벼움

커서가 지나가면 주변 격자가 물결처럼 부풀어 오른다. macOS 독 느낌.

칸 위로 마우스를 움직여 보세요 (데스크톱 전용)

적용 대상	점·아이콘·썸네일 그리드
트리거	mousemove (데스크톱 전용)
수치·구현	각 셀과 커서 거리 d → scale = 1 + clamp(0,.9, (260-d)/260) · quickTo duration .35 · stagger 없음(거리로 자연 발생)
모바일	미적용 (셀 고정 크기)
필요 이미지	불필요

글자 스크램블 확정

가벼움

글자가 지직거리며 돌다가 최종 값으로 확정된다. 숫자·기록에 쓴다.

0000

--------

글자가 지직거리다 최종 값으로 확정됩니다

적용 대상	숫자·라벨·카테고리명
트리거	ScrollTrigger 진입 (once) 또는 값 변경 시
수치·구현	ScrambleTextPlugin · scrambleText:{text:목표, chars:"0123456789" 또는 "upperCase", speed:.6} · duration 1.1
모바일	유지 (duration .8로 단축)
필요 이미지	불필요

실제 페이지에서 보기 ↗

커서 추적 이미지 프리뷰

가벼움

목록에 마우스를 올리면 그 항목의 사진이 커서를 따라다닌다.

브랜드 촬영
공간 기록
제품 컷
인터뷰

목록에 마우스를 올리면 사진이 따라옵니다 (데스크톱 전용)

적용 대상	텍스트 목록(메뉴·프로젝트·매물 인덱스)
트리거	mouseenter/mousemove/mouseleave (데스크톱)
수치·구현	항목 hover 시 해당 이미지가 커서를 따라옴 · quickTo x/y duration .45 · scale .9→1 + autoAlpha 0→1 · 회전 ±4deg
모바일	미적용 → 목록 아래 정적 썸네일로 대체
필요 이미지	4장

실제 페이지에서 보기 ↗

카드 스택 쌓임

중간

카드가 스크롤에 따라 한 장씩 겹쳐 쌓이고 뒤쪽은 뒤로 물러난다.

01

02

03

스크롤하면 카드가 겹쳐 쌓이고 뒤쪽은 물러납니다

적용 대상	순차 카드(공정·단계·요금제)
트리거	ScrollTrigger scrub + position:sticky
수치·구현	각 카드 sticky top:calc(80px + n*18px) · 뒤 카드 scale 1→.94, brightness 1→.72 · fromTo로 시작값 못박기
모바일	sticky 해제 → 일반 세로 흐름 (겹침 금지)
필요 이미지	3장

실제 페이지에서 보기 ↗

스크럽 벤토 갤러리

중간

크기가 제각각인 사진 타일이 스크롤에 맞춰 하나씩 자리를 잡는다.

스크롤에 맞춰 타일이 하나씩 자리를 잡습니다

적용 대상	크기가 다른 이미지 타일 그리드(벤토)
트리거	핀 + scrub
수치·구현	타일별 y·scale·opacity를 서로 다른 진행 구간에 배치 · stagger from:"random" · 핀 트리거=핀 대상 동일 요소
모바일	핀 해제 → 2칼럼 그리드로 일괄 페이드업
필요 이미지	6장

실제 페이지에서 보기 ↗

필터 재배치(Flip)

중간

필터를 누르면 카드가 사라지지 않고 새 위치로 미끄러져 재배치된다.

버튼을 누르면 카드가 새 위치로 미끄러집니다

적용 대상	카테고리 필터가 있는 카드 목록
트리거	필터 버튼 클릭
수치·구현	const s=Flip.getState(cards) → DOM 변경(hidden 토글) → Flip.from(s,{duration:.6, ease:"power2.inOut", stagger:.03, absolute:true, onEnter/onLeave})
모바일	유지 (duration .45로 단축)
필요 이미지	6장

실제 페이지에서 보기 ↗

도형 모핑(MorphSVG)

중간

도형이 다른 도형으로 부드럽게 변형된다. 아이콘 전환·계절 표현에 쓴다.

도형이 원 → 육각형 → 물방울로 변형됩니다

적용 대상	SVG 아이콘·블롭·실루엣
트리거	ScrollTrigger 진입 또는 상태 변경
수치·구현	MorphSVGPlugin · morphSVG:{shape:"#target", shapeIndex:"auto"} · duration .9 · ⚠ 두 path의 점 개수가 달라도 auto가 맞춘다
모바일	유지 (모션만 단축)
필요 이미지	불필요

실제 페이지에서 보기 ↗

커서 트레일

가벼움

커서 뒤로 잔상 점들이 꼬리처럼 따라온다.

커서를 움직이면 점들이 꼬리처럼 따라옵니다 (데스크톱 전용)

적용 대상	히어로·갤러리 영역
트리거	mousemove (데스크톱 전용)
수치·구현	점 12~18개를 quickTo로 순차 지연 추종(각 .04s씩) · scale 1→0 · 영역 밖에서 소멸
모바일	미적용
필요 이미지	불필요

롤링 텍스트(문자 롤업)

가벼움

버튼에 마우스를 올리면 글자가 위로 굴러 올라가며 교체된다.

상담 예약하기상담 예약하기

버튼에 마우스를 올려 보세요

적용 대상	버튼 라벨·메뉴 항목
트리거	hover (데스크톱)
수치·구현	글자를 위아래 2벌 겹쳐두고 yPercent -100 이동 · stagger .02 · duration .4 · overflow:hidden 필수
모바일	미적용 (기본 라벨 고정)
필요 이미지	불필요

스태거 등장(리스트)

가벼움

목록이 화면에 들어오면 항목이 차례로 떠오른다.

분해 세척
고압 살균
부품 교체
마감 점검
A/S 보증

화면에 들어오면 항목이 차례로 떠오릅니다

적용 대상	목록·카드 그리드
트리거	ScrollTrigger.batch (once)
수치·구현	batch로 묶어 y 24→0 · autoAlpha 0→1 · stagger .07 · ⚠ 안전망 트리거 병행(미발화 대비)
모바일	유지 (stagger .05로 단축)
필요 이미지	불필요

실제 페이지에서 보기 ↗

아코디언 auto height

가벼움

FAQ를 누르면 내용 높이에 맞춰 부드럽게 펼쳐진다.

평택·안성·동탄까지 방문합니다. 그 외 지역은 문의 주세요.

벽걸이 기준 1시간, 스탠드형은 1시간 30분 정도 걸립니다.

질문을 눌러 보세요 — 내용 높이에 맞춰 펼쳐집니다

적용 대상	FAQ·상세 토글
트리거	클릭
수치·구현	gsap.to(panel,{height:"auto", duration:.45, ease:"power2.inOut"}) · height:auto를 GSAP이 실측해 보간 · 아이콘 rotation 45deg
모바일	유지
필요 이미지	불필요

실제 페이지에서 보기 ↗

방향 인식 헤더

가벼움

아래로 내리면 헤더가 숨고, 위로 올리면 바로 다시 나타난다.

BRANDMENU

아래로 스크롤 → 헤더 숨김

위로 스크롤 → 헤더 복귀

맨 위 → 항상 노출

·

박스 안을 스크롤해 보세요

적용 대상	상단 고정 헤더
트리거	ScrollTrigger onUpdate → self.direction
수치·구현	내리면 yPercent -100 숨김 / 올리면 0 복귀 · duration .35 · 최상단에선 항상 노출 + 배경 투명→불투명
모바일	유지 (모바일에서 특히 유용 — 화면을 넓게 쓴다)
필요 이미지	불필요

실제 페이지에서 보기 ↗

텍스트 마스킹 리빌

중간

문장이 마스크 아래에서 한 줄씩 밀려 올라온다. 헤드라인 기본기.

기록은 거짓말하지

않습니다

문장이 마스크 아래에서 한 줄씩 올라옵니다

적용 대상	헤드라인·인용문
트리거	ScrollTrigger 진입 (once)
수치·구현	SplitText type:"lines", mask:"lines" · yPercent 100→0 · stagger .09 · duration 1.1 · ⚠ 애니메이션은 onSplit 안에서
모바일	유지 (duration .8)
필요 이미지	불필요

실제 페이지에서 보기 ↗

무한 루프 패널

중간

패널이 끝없이 순환한다. 끝에 도달해도 끊기지 않는다.

끝없이 순환합니다 — 끝에 도달해도 끊기지 않습니다

적용 대상	후기·파트너 로고·시즌 카드
트리거	상시 루프 + 드래그
수치·구현	horizontalLoop 헬퍼 패턴 · x를 modifiers로 wrap · repeat:-1 · 드래그 시 속도 반영, hover 시 일시정지
모바일	overflow-x:auto + scroll-snap 으로 대체
필요 이미지	4장

실제 페이지에서 보기 ↗

스와이프 슬라이더

중간

손으로 밀어 넘기는 슬라이더. 관성으로 자연스럽게 멈춘다.

좌우로 끌어 넘겨 보세요

적용 대상	후기·시공사례 슬라이드
트리거	Draggable + 스와이프
수치·구현	Draggable type:"x" + Inertia + snap(슬라이드 폭 단위) · 인디케이터 동기화 · allowNativeTouchScrolling:true
모바일	유지 (터치 스와이프가 본래 용도)
필요 이미지	4장

실제 페이지에서 보기 ↗

갤러리 모달 확대(Flip)

중간

썸네일을 누르면 그 자리에서 커지며 큰 사진으로 이어진다.

썸네일을 누르면 그 자리에서 커집니다

적용 대상	포트폴리오·시공사례 썸네일
트리거	썸네일 클릭
수치·구현	Flip.fit 또는 getState → 모달로 DOM 이동 → Flip.from(duration:.6, absolute:true) · ESC·배경클릭 닫기 · focus trap
모바일	유지 (전체화면 모달)
필요 이미지	6장

실제 페이지에서 보기 ↗

곡선 페이지 전환

중간

화면이 곡선을 그리며 덮였다가 걷힌다. 전환이 고급스러워진다.

버튼을 누르면 곡선이 화면을 덮었다 걷힙니다

적용 대상	섹션·페이지 전환 오버레이
트리거	링크 클릭 또는 섹션 진입
수치·구현	SVG path의 d를 곡선→직선→곡선으로 애니메이션(MorphSVG 또는 path 보간) · duration .8 · ease:power2.inOut
모바일	유지 (duration .6)
필요 이미지	불필요

경로 따라 이동(MotionPath)

중간

아이콘이 정해진 곡선 경로를 따라 이동한다. 배송·시술 단계에 쓴다.

스크롤하면 마커가 경로를 따라 이동합니다

적용 대상	아이콘·마커·배달 경로
트리거	ScrollTrigger scrub
수치·구현	MotionPathPlugin · motionPath:{path:"#route", align:"#route", autoRotate:true, alignOrigin:[.5,.5]}
모바일	유지 (경로 단순화)
필요 이미지	불필요

실제 페이지에서 보기 ↗

파티클 캔버스

무거움

배경에 입자가 떠다닌다. 눈·먼지·빛망울 표현.

배경에 입자가 떠다닙니다 (화면 밖이면 자동 정지)

적용 대상	히어로·시그니처 배경
트리거	상시 또는 스크롤 진입
수치·구현	canvas 2d · 입자 60~120개 · requestAnimationFrame · ⚠ 화면 밖이면 정지(IntersectionObserver)로 배터리 절약
모바일	입자 수 절반 또는 정적 배경으로 대체
필요 이미지	불필요

스크롤 스크럽 비디오

무거움

스크롤을 내리면 카메라가 장면 안으로 날아 들어가고, 올리면 거꾸로 감긴다. 애플 제품 페이지 방식.

SCROLL = TIMELINE

스크롤을 내리면 영상이 앞으로, 올리면 거꾸로 감깁니다

적용 대상	풀블리드 히어로 또는 챕터 섹션(장면 2~3개 연결)
트리거	스크롤 위치 → video.currentTime 직접 매핑 (GSAP 불필요 · 바닐라 JS)
수치·구현	섹션당 1.3vh 스크롤 = 클립 1개 전량 · 관성 계수 0.18(cur += (target-cur)*0.18) · 클립은 Blob으로 로드(range 요청 불필요) · 뷰포트 ±1.6배 진입 시 lazy 로드 · ⚠ 인코딩 필수: crf 20 · -g 8(키프레임 촘촘히) · +faststart · 무음
모바일	720p·-g 4 경량 클립 별도 제공(clipMobile). 없으면 데스크톱 클립 폴백. seeking 중 재탐색 금지(코알레싱)로 빠른 플릭 시 멈춤 방지 · 첫 프레임 전까지 still이 포스터
필요 이미지	불필요

커서 브러시 인물 전환

중간

커서가 지나간 자리에만 두 번째 사진이 붓으로 칠한 것처럼 드러나고, 손을 떼면 서서히 사라진다. 움직인 궤적이 곧 형태가 된다. 시술 전/후·시공 전/후·착용 전/후에 그대로 쓴다.

이미지 위에서 커서를 움직여 문질러 보세요 — 손을 떼면 서서히 사라집니다

적용 대상	히어로 배경(같은 구도 사진 2장 — 전/후)
트리거	pointermove (canvas 2D · GSAP 불필요 · 바닐라 JS)
수치·구현	버퍼 캔버스에 붓자국 누적 → 매 프레임 감쇠 → 그 자국을 마스크로 after 오려내기. 합성 3단: destination-out(감쇠) → lighter(덧칠) → destination-in(오려내기) · 반감기 140ms(시간 기준 감쇠라 프레임률 무관) · 붓 = 카드 짧은 변 ×0.075(42~88px) · 붓 모양은 원이 아니라 40각형 반지름을 값 노이즈로 흔든 것(원이면 칠한 느낌이 안 난다) · 프레임 간 이동거리를 붓 크기로 나눠 최대 12스탬프 보간(빠르게 그어도 안 끊김) · 버퍼는 절반 해상도(비용 1/4, 어차피 흐릿해 품질차 없음)
모바일	호버가 없으므로 9초 주기 자동 sweep(보이지 않는 손이 훑고 지나감). prefers-reduced-motion 이면 리빌 끄고 before 정지 이미지만
필요 이미지	2장

실제 페이지에서 보기 ↗

AIPM

인터랙션 효과 미리보기

패럴랙스 이미지

마그네틱 CTA 버튼

커스텀 커서(데스크톱)

3D 틸트 카드

비포&애프터 비교 슬라이더

가로 드래그 스트립

무한 키워드 마퀴

듀오톤→컬러 이미지 호버

줌 트랜지션

비디오 배경(히어로)

SVG 라인 드로잉(scrub)

이미지 시퀀스 스크럽(canvas)

스크롤 속도 기울기(velocity skew)

커서 근접 확대 그리드

글자 스크램블 확정

커서 추적 이미지 프리뷰

카드 스택 쌓임

스크럽 벤토 갤러리

필터 재배치(Flip)

도형 모핑(MorphSVG)

커서 트레일

롤링 텍스트(문자 롤업)

스태거 등장(리스트)

아코디언 auto height

방향 인식 헤더

텍스트 마스킹 리빌

무한 루프 패널

스와이프 슬라이더

갤러리 모달 확대(Flip)

곡선 페이지 전환

경로 따라 이동(MotionPath)

파티클 캔버스

스크롤 스크럽 비디오

커서 브러시 인물 전환