Design Atlas
한국어
▶ Motion graphics

Zoom transition

줌 트랜지션

Zooming rapidly into one point until the frame blurs out, swapping the scene at the peak, then zooming back out — a staple of Reels and Shorts editing.

Also known as: Punch zoomWhip zoom
···
html
<div class="stage">
  <div class="scene a">SCENE A</div>
  <div class="scene 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;filter:blur(0px)}
.a{background:radial-gradient(circle at 50% 50%,#3a2a5c,#17101f);animation:zoom-a 2.8s ease-in infinite}
.b{background:radial-gradient(circle at 50% 50%,#1a3a3a,#0c1a1a);animation:zoom-b 2.8s ease-out infinite}
@keyframes zoom-a{
  0%{transform:scale(1);filter:blur(0px);opacity:1}
  46%{transform:scale(2.6);filter:blur(10px);opacity:1}
  50%{transform:scale(2.6);filter:blur(10px);opacity:0}
  100%{transform:scale(1);filter:blur(0px);opacity:0}
}
@keyframes zoom-b{
  0%{transform:scale(2.6);filter:blur(10px);opacity:0}
  50%{transform:scale(2.6);filter:blur(10px);opacity:1}
  54%{transform:scale(1);filter:blur(0px);opacity:1}
  100%{transform:scale(1);filter:blur(0px);opacity:1}
}

Same principle as the whip pan — swap the clip at the exact moment the frame is fully blurred from the zoom, and viewers read it as one continuous push-in. The only difference is the axis: zoom instead of pan.

Auto-templates in CapCut and Premiere Pro can generate this in seconds, which is a big part of why it became the default grammar of short-form content. It reads far more natural when the zoom's focal point lands on whatever the next scene wants to emphasize — a face, a product — instead of dead center.

If the zoom speed and easing don't match across the cut, the two clips feel like they're zooming at different rates. The reliable fix is counting the frames in the zoom-in and zoom-out segments and matching them by hand.

When to use

Don't push the zoom scale further than needed — overdo it and the blur reads as pixelation breaking apart, not motion.