한 장면이 직선 경계선을 따라 밀려나며 다음 장면을 드러내는 전환. 경계선의 방향·모양(직선·원형·도형)에 따라 종류가 나뉩니다.
디자인 아틀라스<div class="stage">
<div class="scene a">SCENE A</div>
<div class="scene b" id="b">SCENE B</div>
</div>.stage{position:absolute;inset:0;overflow:hidden}
.scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font:800 clamp(16px,6vmin,32px)/1 sans-serif;color:#fff;letter-spacing:.03em}
.a{background:linear-gradient(135deg,#2a2a72,#1a1a2e)}
.b{background:linear-gradient(135deg,#f25c8a,#c9184a);
clip-path:inset(0 100% 0 0);animation:wipe 3s ease-in-out infinite}
@keyframes wipe{0%,10%{clip-path:inset(0 100% 0 0)}45%,60%{clip-path:inset(0 0% 0 0)}95%,100%{clip-path:inset(0 100% 0 0)}}가장 오래된 전환 기법 중 하나로, 스타워즈 시리즈가 즐겨 쓴 것으로 유명하다(조지 루카스가 옛 영화의 "장면 전환 문법"을 일부러 되살린 것). 경계선이 수평·수직으로 지나가면 기본 와이프, 원형으로 커지면 아이리스 와이프, 시계 방향으로 돌면 클록 와이프라고 부른다.
Premiere Pro의 Video Transitions 패널에 기본 프리셋으로 들어 있고, After Effects에서는 두 번째 레이어에 애니메이션되는 마스크를 씌워 직접 만든다 — 결국 트랙 매트의 응용이다.
경계선에 약간의 흐림이나 그라디언트를 주면 딱딱한 느낌이 줄어든다. 완전히 날카로운 경계선은 옛날 파워포인트 느낌을 준다는 평이 많다.
방향에 의미를 담으세요 — 왼쪽에서 오른쪽 와이프는 "다음", 위에서 아래는 "새 섹션 시작" 같은 식으로 일관되게 씁니다.