Design Atlas
한국어
▶ Motion graphics

Whip pan

휩 팬

A camera pan so fast the frame blurs into a streak — used as a transition by cutting from one scene's blur into another's.

Also known as: Swish panZip pan
···
html
<div class="stage">
  <div class="scene a">SCENE A</div>
  <div class="scene b">SCENE B</div>
  <div class="streaks"></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,#204030,#0d1f16);animation:show-a 2.6s steps(1) infinite}
.b{background:linear-gradient(135deg,#4a2050,#22102a);animation:show-b 2.6s steps(1) infinite}
@keyframes show-a{0%,44%{opacity:1}45%,100%{opacity:0}}
@keyframes show-b{0%,44%{opacity:0}45%,100%{opacity:1}}
.streaks{position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 2px,transparent 2px 14px);
  opacity:0;animation:streak-flash 2.6s ease-in-out infinite}
@keyframes streak-flash{0%,38%{opacity:0;transform:scaleX(1)}44%{opacity:.9;transform:scaleX(1.4)}50%{opacity:0;transform:scaleX(1)}100%{opacity:0}}

On set it's made by physically snapping the camera sideways fast; the real trick lives in the edit — you cut from the moment scene A's blur peaks to the moment scene B's blur is easing off, matched at roughly the same intensity, and the audience reads it as one continuous camera swing.

Without real whip-pan footage, editors fake it in After Effects by combining Directional Blur with a fast position keyframe. It's a favorite in YouTube vlogs and variety-show caption edits for making a cut feel snappy.

If the blur intensity doesn't match across the cut, it reads as a jarring pop instead of a smooth swing — matching that intensity and direction is basically the whole trick.

When to use

Overuse it in one edit and it starts to feel nauseating — save it for the one or two moments where the tempo genuinely needs to snap.