Remotion TransitionSeries — effect skill for transitions

For AI agents: find the right skill in one call — curl -s "https://varg.ai/how-to/api/search?q=<what the person wants>" returns the matching how-to page and the best skills with install commands, as markdown (Russian works too). Full index: https://varg.ai/how-to/llms.txt. Every page has a markdown twin: add .md to its path. Before generating anything, show the person the options on the how-to page.

Sequence scenes with <TransitionSeries>; each transition overlaps its neighbours, so the video gets shorter.

What it does

Any built-in or custom presentation between React scenes.

When: Remotion projects; data-driven videos where scenes are components.

Watch out: Forgetting that 40 + 60 frames with a 30-frame transition is 70 frames, not 100; and placing two transitions next to each other.

Timing: linearTiming({durationInFrames}) or springTiming({config:{damping:200}}) (~23 frames at 30 fps)

Also called: @remotion/transitions, TransitionSeries, linearTiming, springTiming, presentations

In Remotion

import {TransitionSeries, linearTiming, springTiming} from '@remotion/transitions';
import {fade} from '@remotion/transitions/fade';
import {slide} from '@remotion/transitions/slide';

export const Edit = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={40}><A /></TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={linearTiming({durationInFrames: 30})} />
    <TransitionSeries.Sequence durationInFrames={60}><B /></TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={slide({direction: 'from-right'})} timing={springTiming({config: {damping: 200}})} />
    <TransitionSeries.Sequence durationInFrames={90}><C /></TransitionSeries.Sequence>
  </TransitionSeries>
);
// total = 40 + 60 + 90 - 30 - 23 = 137 frames; compute with timing.getDurationInFrames({fps})

Rules: a transition may not be longer than either neighbour; no two transitions (or overlays) adjacent; a transition can be first/last to animate an entrance/exit; default presentation is slide().

Built-ins in @remotion/transitions 4.0.539: CSS (work everywhere) fade, slide, wipe, flip, clockWipe, iris, none, pushCut; shader/HTML-in-canvas blurSlide, bookFlip, crossZoom, crosswarp, dissolve, dreamyZoom, filmBurn, linearBlur, ripple, swap, zoomBlur, zoomInOut. Each imports from @remotion/transitions/<kebab-name>. Shader presentations are built on Remotion's HTML-in-canvas: renders work out of the box (--gl=angle, or --gl=swangle without a GPU); the Studio preview needs Chrome with chrome://flags/#canvas-draw-element enabled. There is no cube presentation; use @gl-transitions/remotion.

Where this comes from

Use when

Not for

Install

Example output

https://s3.varg.ai/how-to/previews/a67890842875/take-remotion-transitionseries.mp4 — slideup between two shots, with the timeline strip of the edit. Footage: Coffee Run (2020), Blender Studio | studio.blender.org, CC BY 4.0; Coffee Run (2020), Blender Studio | studio.blender.org, CC BY 4.0. (credit: Rendered by varg · Coffee Run (2020))

More transitions skills