줌 와이프Zoom Wipe

Zoom Wipe

줌 와이프

다른 이름Also known as · Zoom wipe

214

도판Fig. 214. 줌 와이프 · Zoom Wipe · power3.inOut

재생 속도Speed

중심 확대가 진행되는 도중 직선 경계가 좌우로 이동해 새 장면을 공개하는 와이프Mid-zoom on the center, a straight edge moves across the frame and reveals the new scene.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

카메라가 앞으로 밀고 들어가는 동안 페이지가 넘어간다는 감각The feeling of the camera pushing in while a page turns.

언제 쓰나Use whenUSE WHEN

카메라 이동감이 있는 영상에서 장면을 바꿀 때
와이프에 깊이를 더하고 싶을 때

Change scenes in videos with camera-move feel.
Add depth to a wipe.

과용 주의AvoidAVOID

최대 scale 1.6 초과 금지
이징은 easeInOutCubic 계열로 둘 다 동일하게

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

앞 장면이 0.65초 동안 scale 1에서 1.4로 확대되는 사이 직선 경계가 왼쪽에서 오른쪽으로 이동하며 뒤 장면이 반대로 1.4에서 1로 줄며 나타난다

과용 · 나쁜 사례OVERUSE

확대와 경계 이동의 타이밍이 어긋나 두 동작이 따로 보이거나, scale이 2배를 넘어 픽셀이 깨진다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
전체 지속	0.65s	0.5~1.0s	동시
앞 scale	1→1.4	1.2~1.6	경계 쪽으로 확대
뒤 scale	1.4→1		반대로 줄어듦
경계 방향	좌에서 우	4방향	Left/Right 변형

GSAP

tl.to('.a', { scale: 1.4, duration: 0.65, ease: 'power3.inOut' }, 0)
  .fromTo('.b', { scale: 1.4, clipPath: 'inset(0 100% 0 0)' },
    { scale: 1, clipPath: 'inset(0 0% 0 0)', duration: 0.65, ease: 'power3.inOut' }, 0);

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

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상A>에서 <대상B>로 줌 와이프를 만들어줘. A는 0.65초 동안 scale 1에서 1.4로 확대되고, B는 scale 1.4에서 1로 줄면서 clipPath inset이 (0 100% 0 0)에서 (0 0% 0 0)으로 열려 왼쪽에서 오른쪽으로 공개돼. 이징은 둘 다 power3.inOut, 같은 시각에 시작, paused 타임라인 하나.

Build a zoom wipe from <targetA> to <targetB>. A scales from 1 to 1.4 over 0.65 seconds while B scales from 1.4 to 1 and its clipPath inset opens from (0 100% 0 0) to (0 0% 0 0), revealing left to right. Both use power3.inOut, start together, and live in one paused timeline.

Codex

<파일>에 zoom wipe를 적용해. .a scale 1에서 1.4 (0.65s power3.inOut), .b scale 1.4에서 1과 clipPath inset(0 100% 0 0)에서 inset(0 0% 0 0) (0.65s power3.inOut). 0.32초 캡처에서 경계가 화면 중앙 근처인지, 0.65초에 B가 scale 1로 전면인지 확인해.

Apply a zoom wipe in <file>. .a scale 1 to 1.4 (0.65s power3.inOut); .b scale 1.4 to 1 and clipPath inset(0 100% 0 0) to inset(0 0% 0 0) (0.65s power3.inOut). Capture at 0.32 seconds to confirm the edge is near mid-frame, and at 0.65 seconds to confirm B is full frame at scale 1.