@remotion/transitions

available from v4.0.53

This package provides the <TransitionSeries> component for transitioning between two scenes as well as timing presets.

Installation

npm

bash
npm i @remotion/transitions

bash
npm i @remotion/transitions

yarn

bash
yarn add @remotion/transitions

bash
yarn add @remotion/transitions

pnpm

bash
pnpm i @remotion/transitions

bash
pnpm i @remotion/transitions

API

Components

<TransitionSeries>

A <Series> with transitions inbetween

Timings

springTiming()

Transition with a spring()

linearTiming()

Transition linearly with optional Easing

Custom timings

Implement your own timing

Presentations

Hover over an effect to see the preview.

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

Audio transitions

Add a sound effect to a transition

License

Remotion License