Whip pan

When to use

Use when the next shot is to the side of this one and a cut would feel abrupt. Both shots sit on one horizontal strip; the strip slides one screen width and a horizontal blur follows its speed, so at the fastest frame both shots are a streak and the eye never sees the seam. The pan eases in, peaks at the midpoint and lands soft. Clip: whip-pan.mp4. Demo: demo/whip-pan.html.

The code

<svg width="0" height="0" style="position: absolute"><filter id="motion" x="-10%" width="120%"><feGaussianBlur id="mb" stdDeviation="0 0"/></filter></svg>
<div class="strip" style="width: 200vw; filter: url(#motion)"><section class="shot a"></section><section class="shot b"></section></div>
<script type="module">
import '../../core/engine/page-api.js';
import { EASE, easeFn } from '../../core/motion/presets.js';
const whip = easeFn('swap');
const strip = document.querySelector('.strip'), blur = document.getElementById('mb');
const t0 = 0.3, dur = 0.5, travel = window.innerWidth;
strip.animate([{ translate: '0 0' }, { translate: `${-travel}px 0` }],
  { duration: dur * 1000, delay: t0 * 1000, easing: EASE.swap, fill: 'both' });
vawe.onFrame((t) => {
  const u = Math.min(1, Math.max(0, (t - t0) / dur)), du = 1 / 240;
  const slope = (whip(Math.min(1, u + du)) - whip(Math.min(1, u))) / du;
  const pxPerFrame = (slope / dur) * travel / 60;
  blur.setAttribute('stdDeviation', `${(u > 0 && u < 1 ? pxPerFrame * 0.4 : 0).toFixed(2)} 0`);
});
</script>

Easing and timing

The clip runs 1.2 s. The look is field.

The clip uses 2 named eases from core/motion/presets.js. Each is a pair of After Effects handles: influence is how far along the segment the handle reaches, and speed is how fast the value moves at the key, as a multiple of the segment's average speed. Motion in the docs explains both.

Notes

The curve is EASE.swap: slow start, full speed at 50 percent, soft landing. At 0.5 s the peak is about a fifth of the screen width per frame, so a blur of 0.4 of that (x only) turns text into a streak without turning the frame to grey. Under 0.35 s the pan reads as a cut; over 0.7 s it reads as a slow pan and the streak is gone. Let shot A keep moving until the pan starts (the bars here still fill) and let shot B land with a small settle of its own. Change axis at the next seam: after a whip to the left, do not whip left again.

Looks (ground, type, radius, accent) live in demo/demo.css; this snippet keeps neutral tokens.

Sound

Sound: whoosh at 0.27 s into the move, so its pass point (about 0.28 s into the cue) meets the fastest frame at 0.55 s (default gain); one whip per film.