Video transitions
Also searched as: transitions, cut, scene wipe, morph, dissolve, whip pan
Canonical Definition
A video transition is the visual join between two adjacent shots — a cut, wipe, morph, whip-pan, or shader distortion that carries the viewer across a temporal or spatial boundary.
12 to 24 frames (0.4s to 0.8s)
cubic-bezier(0.7, 0, 0.3, 1) or easeInOutCubic
The default edit in filmmaking is the straight cut. A hard cut is cognitively invisible; any non-cut transition explicitly calls attention to the seam. In motion design, transitions are motivated by conceptual relationships: comparing before/after, traveling through a portal, or speeding through time.
In code-based video, transitions consume frames from both outgoing and incoming scenes. A 20-frame transition overlaps 10 frames of shot A with 10 frames of shot B.
Whip Pans & High-Velocity Swipes
Simulating rapid camera whip with directional motion blur
A whip-pan accelerates shot A out of frame with heavy horizontal motion blur while shot B enters at matching velocity, creating an energetic seamless handoff.
How this works: A high-velocity horizontal camera wipe with directional motion blur bridging two distinct layouts.
- Exponential acceleration curve into the seam
- Dynamic blur filter tied directly to instantaneous frame velocity
- Natural handoff on music downbeats
Cross-Warp Morphs & Shader Seams
Distorting pixel grids to blend two scenes through spatial deformation
Shader-driven transitions distort the luminance or coordinate grid of both shots simultaneously, turning hard cuts into organic transformations.
How this works: A GPU shader transition that dynamically pinches and warps the coordinate space of the incoming frame.
- GLSL/WebGL coordinate distortion
- Smooth parametric progress factor (0 to 1)
- Resolution-independent GPU rendering
Engineering Guidelines & Common Pitfalls
Best Practices (What to do)
- Keep standard cuts for 80% of edits; save stylized transitions for major scene transitions or thesis shifts.
- Ensure directional continuity: if shot A exits right, shot B must enter from the right.
Common Failure Modes (What to avoid)
- Using complex wipes on every cut: over-transitioning exhausts the viewer.
- Forgetting to overlap audio: a transition feels disjointed if sound cuts abruptly while the visual morphs.
Working catalog implementations
Typed Remotion components ready to drop into code.
Whip Pan
Shader transition simulating a fast camera whip pan
Match Cut
A circle accelerates into a hard single-frame scene swap, matches the incoming circle exactly, and continues into a smaller resting pose.
Cross Warp Morph
Shader transition with cross-warped morphing
Type Match Cut
A headline splits vertically around an incoming panel, which grows from the negative space and takes the frame as the words exit through opposite edges.
Build video transitions in Animatiq
Prompt our motion agent in natural language. Get back typed Remotion React code with custom easing curves, brand palettes, and frame-accurate timing.
Related motion principles
Match cuts & visual rhymes
A match cut is an edit between two shots that share a common shape, color, or trajectory, creating instantaneous conceptual continuity across a dramatic shift in subject or setting.
Motion & CameraCamera moves & focus
Camera movement applies the spatial language of cinematography — push-ins, pull-backs, orbit rotations, and rack focus — to 2D graphic canvases that possess no physical lens.
Motion FundamentalsShaders & GPU procedural motion
A shader is a program running directly on the GPU that calculates color for millions of pixels in parallel every frame, enabling procedural noise, caustics, and organic distortions.