Module 2.7 — Transitions

Detailed content

🗺️ Overview — when to use transitions

A transition isn't just a visual effect—it's narrative language. A hard cut says "immediate continuity"; a fade through black says "pause, jump in time." Choosing the wrong one misinforms the viewer even if it technically works.

🎯 Golden rule

The most invisible transition is usually the best. Use flashy effects only when you want the viewer to feel the change — a jump in time, a shift in emotion, the reveal of something new.

Hard cut

No transition is also a choice

Dissolve

Smooths the transition between scenes

Wipe

Directional — keeps the pace high

Morphing

Connects elements visually

🪟 blinds-transition — blinds effect

The template blinds-transition divides the screen into N vertical slices (default 8) that rotate like blinds, revealing the next scene. The effect is dated but works very well in retro or corporate presentation contexts.

Animation core blinds-transition.tsx

import { useCurrentFrame, useVideoConfig, interpolate } from "remotion";

const blindCount = 8;
const frame = useCurrentFrame();
const { fps } = useVideoConfig();

// cada persiana abre com delay sequencial
blinds.map((_, i) => {
  const delay = (i / blindCount) * (fps * 0.4);
  const rotation = interpolate(
    frame - delay, [0, fps * 0.6],
    [0, 90],
    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
  );
})

✓ Use when

•Corporate presentations with a clean aesthetic
•Videos with a nostalgic or retro tone
•Product slideshow with a cut at each item

✗ Avoid when

•The content requires emotional flow (music, doc)
•Short videos: the effect uses too many frames
•More than 2× in the same video — gets old fast

blindCount

Number of slices (default 8)

sequential delay

Each band opens with a time offset

rotateY

Rotates 0→90° to reveal the background

perspective

Necessary for a convincing 3D effect

🕐 clock-wipe — radial sweep

O clock-wipe uses a circular clip-path that sweeps from 0° to 360° like a clock hand, revealing the new scene. The math behind it involves angle calculation with Math.atan2 and SVG clipPath.

💡 Practical tip

Combine clock-wipe with a countdown-intro: the countdown ring rotates as it counts 3-2-1, and when it reaches GO, the clock-wipe reveals the main scene. A coherent visual narrative without an extra line of code.

Calculate the frame angle

Map frame / durationInFrames for degrees (0–360) using interpolate.

Build the clipPath SVG path

Using polar → Cartesian coordinates to draw the circular sector that covers scene B.

Apply clipPath to scene B’s div

Scene B stays "behind" and only appears where the sector has expanded—a clean effect with no extra compositing.

SVG clipPath

Progressive circular mask

polar coordinates

sin/cos for the sector’s x,y

0° = top

rotate(-90deg) in SVG

largeLargeArc

SVG arc >180° flag

🎭 cross-dissolve — the classic cross-fade

O cross-dissolve is the simplest and most widely used: scene A goes from opacity: 1 a 0 while scene B moves in the opposite direction, both at the same time. The secret is simultaneous overlap — not serial execution.

Complete implementation cross-dissolve.tsx

const frame = useCurrentFrame();
const { fps } = useVideoConfig();

const totalFrames = fps * 2.5;
const progress = Math.min(frame / totalFrames, 1);

// A sai enquanto B entra — simultâneo
const sceneAOpacity = 1 - progress;
const sceneBOpacity = progress;

✓ Ideal for

•Transition between similar nature clips
•Smooth passage of time in documentaries
•Emotional or narrative slideshow

✗ Do not use when

•Scenes with white or very light backgrounds (will look washed out)
•Fast cuts — a slow dissolve breaks the rhythm
•When elements A and B overlap awkwardly

linear progress

No easing — intentionally linear

position absolute

Both scenes occupy the same space

2.5 × fps

Default duration: 2.5 seconds

Math.min(..., 1)

Clamp so it doesn’t exceed 1

⬛ fade-through-black — dip to black

O fade-through-black (also called "dip to black") inserts a completely black frame between two scenes. Unlike a cross-dissolve, the scenes never overlap—the black screen is the "divider" that signals to the viewer: bigger change happened here.

💡 Practical tip

Use fade-through-black at the beginning and end of YouTube videos — fade in from black at the opening and fade out to black at the ending. It creates a cinematic feel that audiences associate with production quality.

Two independent stages fade-through-black.tsx

// Estágio 1: cena A → preto
const fadeOutOpacity = interpolate(
  frame, [0, halfDuration], [1, 0],
  { extrapolateRight: "clamp" }
);

// Estágio 2: preto → cena B
const fadeInOpacity = interpolate(
  frame, [halfDuration, totalDuration], [0, 1],
  { extrapolateLeft: "clamp" }
);

halfDuration

Mid-transition point

solid black bg

Div #000 at the base z-index

serial

Exit before entry (≠ dissolve)

time jump

Narrative signal of a major change

🌀 zoom-through — zoom in/out reveal

O zoom-through is the most epic template: scene A zooms in until it covers the entire screen (infinite scale), and scene B appears zooming out from infinity. It creates the feeling of “entering” a portal. Often used in trailers and intros.

Bidirectional zoom with spring zoom-through.tsx

import { spring, interpolate, useCurrentFrame, useVideoConfig } from "remotion";

// Cena A cresce até sumir
const scaleA = interpolate(frame, [0, halfFrames], [1, 8],
  { extrapolateRight: "clamp" });

// Cena B começa grande e encolhe ao lugar
const scaleB = interpolate(frame, [halfFrames, totalFrames], [8, 1],
  { extrapolateLeft: "clamp" });

scale 1→8

Scene A explodes out of the frame

scale 8→1

Scene B "lands" from infinity

overflow hidden

Container should clip the overflow

trailers/intros

Best use: once per video

📚 Complete Transitions Library

All 9 templates in this category are in templates/. Quick reference:

blinds-transition

templates/blinds-transition.tsx

Vertical slices rotate like blinds, revealing scene B

hook: interpolate + sequential delay

clock-wipe

templates/clock-wipe.tsx

Radial sweep from 0° to 360° in a clock-hand style

hook: SVG clipPath + polar coordinates

cross-dissolve

templates/cross-dissolve.tsx

Classic simultaneous cross-fade between two scenes

hook: inverted opacity A + B

fade-through-black

templates/fade-through-black.tsx

Dip to black — scenes separated by a black frame

hook: interpolate in two stages

iris-transition

templates/iris-transition.tsx

A circle expands from the center, revealing scene B

hook: animated circle r via clipPath

morph-transition

templates/morph-transition.tsx

Simultaneous scale + fade visually connect the scenes

hook: spring scale + interpolate opacity

push-transition

templates/push-transition.tsx

Scene B pushes scene A out of the frame

hook: translateX spring pushes both

slide-wipe

templates/slide-wipe.tsx

Panel slides with spring physics

hook: spring translateX with damping

zoom-through

templates/zoom-through.tsx

Bidirectional zoom in/out — portal effect

hook: scale 1→8→1 interpolate

9 templates

All ready to use and customize

clipPath

Dominant technique in iris and clock-wipe effects

spring

Push and slide use spring physics

interpolate

Base for blinds, dissolve, and zoom

📌 Module summary

✓

Transitions are a narrative language — each effect communicates something to the viewer

✓

blinds-transition — slices with sequential delay, ideal for a retro/corporate context

✓

cross-dissolve — the most versatile: simultaneous inverted opacities

✓

fade-through-black — dip to black for significant time shifts

✓

zoom-through — scale 1→8→1 for the most epic portal effect

Next Module:

2.8 — Intro & Outro: opening and closing templates for your videos

← Back to Track 2 Next Module →