@remotion/transitions
available from v4.0.53
This package provides the <TransitionSeries> component for transitioning between two scenes as well as timing presets.
Installation
- Remotion CLI
- npm
- bun
- pnpm
- yarn
npx remotion add @remotion/transitions
This assumes you are currently using v4.0.417 of Remotion.npm i --save-exact @remotion/transitions@4.0.417
Also update
remotion and all `@remotion/*` packages to the same version.Remove all
^ character in front of the version numbers of it as it can lead to a version conflict.This assumes you are currently using v4.0.417 of Remotion.pnpm i @remotion/transitions@4.0.417
Also update
remotion and all `@remotion/*` packages to the same version.Remove all
^ character in front of the version numbers of it as it can lead to a version conflict.This assumes you are currently using v4.0.417 of Remotion.bun i @remotion/transitions@4.0.417
Also update
remotion and all `@remotion/*` packages to the same version.Remove all
^ character in front of the version numbers of it as it can lead to a version conflict.This assumes you are currently using v4.0.417 of Remotion.yarn --exact add @remotion/transitions@4.0.417
Also update
remotion and all `@remotion/*` packages to the same version.Remove all
^ character in front of the version numbers of it as it can lead to a version conflict.API
Components
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
fade()Animate the opacity of the scenes
slide()Slide in and push out the previous scene
wipe()Slide over the previous scene
flip()Rotate the previous scene
clockWipe()Reveal the new scene in a circular movement
iris()Reveal the scene through a circular mask from center
cube()Paid
Rotate both scenes with 3D perspective
none()Have no visual effect.
Audio transitions
Add a sound effect to a transition