Design Atlas
한국어
▶ Motion graphics

Wipe transition

와이프 전환

One scene is pushed aside along a straight (or shaped) boundary to reveal the next — the type is named for that boundary line.

Also known as: Wipe cut
···
html
<div class="stage">
  <div class="scene a">SCENE A</div>
  <div class="scene b" id="b">SCENE B</div>
</div>
css
.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)}}

One of the oldest transitions on the books, famously favored by the Star Wars films (George Lucas deliberately revived the "scene-change grammar" of older cinema). A straight horizontal or vertical boundary is a basic wipe; a boundary that grows as a circle is an iris wipe; one that sweeps clockwise is a clock wipe.

It ships as a default preset in Premiere Pro's Video Transitions panel, and in After Effects you build it by hand — an animated mask over the second layer, which is really just an application of track matte.

Softening the boundary with a slight blur or gradient takes the edge off. A perfectly hard edge tends to read as dated, "old PowerPoint" territory.

When to use

Give the direction meaning — left-to-right could always mean 'next,' top-to-bottom 'a new section starts' — and stay consistent.