Skip to main content

Transitionsv4.0.59

To transition between two types of absolutely positioned content, you can use the <TransitionSeries> component.

SlideTransition.tsx
tsx
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { slide } from "@remotion/transitions/slide";
 
const BasicTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={slide()}
        timing={linearTiming({ durationInFrames: 30 })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};
SlideTransition.tsx
tsx
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { slide } from "@remotion/transitions/slide";
 
const BasicTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={slide()}
        timing={linearTiming({ durationInFrames: 30 })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};
A
B

Enter and exit animations​

You don't necessarily have to use <TransitionSeries> for transitions between scenes. You can also use it to animate the entrace or exit of a scene by putting a transition first or last in the <TransitionSeries>.

See example

Duration​

In the above example, A is visible for 40 frames, B for 60 frames and the duration of the transition is 30 frames.
During this time, both slides are rendered. This means the total duration of the animation is 60 + 40 - 30 = 70.

Presentations​

A presentation determines the visual of animation.

Overview
List of available presentations
Custom presentations
Implement your own effect
A
B
fade()
Animate the opacity of the scenes
A
B
slide()
Slide in and push out the previous scene
A
B
wipe()
Slide over the previous scene
A
B
flip()
Rotate the previous scene
A
B
clockWipe()
Reveal the new scene in a circular movement
A
B
cube()
Paid
Rotate both scenes with 3D perspective
A
B
none()
Have no visual effect.
Audio transitions
Add a sound effect to a transition

Timings​

A timing determines how long the animation takes and the animation curve.

springTiming()
Transition with a spring()
linearTiming()
Transition linearly with optional Easing
Custom timings
Implement your own timing

Audio transitions​

See here how to include audio effects in your transitions.

Getting the duration of a transition​

You can get the duration of a transition by calling getDurationInFrames() on the timing:

Assuming a framerate of 30fps
tsx
import { springTiming } from "@remotion/transitions";
 
springTiming({ config: { damping: 200 } }).getDurationInFrames({ fps: 30 }); // 23
Assuming a framerate of 30fps
tsx
import { springTiming } from "@remotion/transitions";
 
springTiming({ config: { damping: 200 } }).getDurationInFrames({ fps: 30 }); // 23

Rules​

It is forbidden to have a transition that is longer than the duration of the previous or next sequence.
2
 There can be no two transitions next to each other.
3
 There must be at least one sequence before or after a transition.

See also​