Skip to main content

slide()

A presentation where the entering slide pushes out the exiting slide.

A
B

Example

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>
);
};

API

Takes an object with the following properties:

direction

One of from-left, from-right, from-top, from-bottom.

TypeScript type
tsx
import { SlideDirection } from "@remotion/transitions/slide";
 
const slideDirection: SlideDirection = "from-left";
TypeScript type
tsx
import { SlideDirection } from "@remotion/transitions/slide";
 
const slideDirection: SlideDirection = "from-left";

See also