효과Effects / 전환·컷Transitions / Nº 122

와이프Wipe

Wipe

와이프

다른 이름Also known as · 방향 전환 · Diagonal split · 대각 분할 전환 · Cover wipe · 가림막 와이프 · Shutter · 셔터 전환 · Diagonal Wipe

122

도판Fig. 122. 와이프 · Wipe · none

재생 속도Speed

이동하는 경계 뒤로 새 장면을 순서대로 공개하는 전환A moving boundary progressively reveals the new scene behind it.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

같은 방향의 경계 이동이 새 장면의 진입을 보여준다Communicates the entrance of a new scene through a boundary moving in a consistent direction.

언제 쓰나Use whenUSE WHEN

왼쪽부터 오른쪽으로 정보의 순서를 보여줄 때
장면 경계를 뚜렷하게 보이면서 내용 전체를 교체할 때

Present information in order from left to right.
Replace the entire scene while keeping the transition boundary visible.

과용 주의AvoidAVOID

경계선과 clip-path의 진행률을 따로 움직이지 않는다
전환 중 주홍 대상 여러 개를 추가하지 않는다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

주홍 세로선이 1.2초 동안 오른쪽으로 지나가며 후보 확률 장면이 드러난다

과용 · 나쁜 사례OVERUSE

세로선은 이동하지만 새 장면은 전체가 한꺼번에 나타난다

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
전환 시작	0.35s	0.3~0.8s	시작 상태 확인
전환 지속	1.2s	0.7~1.5s	이동하는 경계가 보이는 시간
마스크	inset(0% 100% 0% 0%) → inset(0% 0% 0% 0%)	오른쪽 inset 100~0%	왼쪽에서 공개
경계 이동	1164px	무대 폭에서 선 폭 제외	4px 선을 마지막에도 유지

GSAP

tl.to('#B', {clipPath:'inset(0% 0% 0% 0%)', duration:1.2, ease:'none'}, 0.35);
tl.to('#edge', {x:1164, duration:1.2, ease:'none'}, 0.35);
tl.to('.lead', {opacity:1, duration:0.2}, 1.7);

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>의 두 장면을 겹쳐 두고 B의 clip-path를 inset(0% 100% 0% 0%)로 시작해줘. 0.35초부터 1.2초 동안 오른쪽 inset을 0%로 바꾸고 4px 주홍 세로선을 x 0에서 1164px로 같이 움직여줘. 이징은 none, 전체 길이는 3초로 하고 1.9초 이후 완성 상태를 정지해.

Overlay the two scenes in <target> and start B with clip-path inset(0% 100% 0% 0%). Starting at 0.35 seconds over 1.2 seconds, animate the right inset to 0% while moving a 4px vermilion vertical line from x 0 to 1164px. Use ease none and a total duration of 3 seconds. Hold the completed state after 1.9 seconds.

Codex

<파일>에 왼쪽에서 오른쪽으로 진행하는 와이프를 적용해. B clip-path inset 오른쪽 100%→0%와 4px 세로선 x 0→1164를 0.35초에 시작해 1.2초 동안 none으로 움직여. 0.23초, 0.73초, 1.23초, 2.9초 캡처에서 경계 뒤에는 B, 앞에는 A가 보이며 끝에 B 전체가 유지되는지 확인해.

Apply a left-to-right wipe in <file>. Starting at 0.35 seconds over 1.2 seconds with ease none, animate B's right clip-path inset from 100% to 0% and a 4px vertical line from x 0 to 1164. Capture at 0.23, 0.73, 1.23, and 2.9 seconds to verify B behind the boundary, A ahead of it, and the full scene B holding at the end.