Skip to main content

@remotion/transitionsv4.0.53

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

Installation​

npx remotion add @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
fade()
Animate the opacity of the scenes
pushCut()
Punch into a hard cut with a brief flash
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
zoomBlur()
HTML-in-canvas
Zoom and rotate scenes with a radial blur
dreamyZoom()
HTML-in-canvas
Zoom through a white flash with gentle rotation
filmBurn()
HTML-in-canvas
Burn through scenes with procedural glow and blur
linearBlur()
HTML-in-canvas
Blend scenes with a directional multi-sample blur
bookFlip()
HTML-in-canvas
Turn the scenes like a shaded book page
zoomInOut()
HTML-in-canvas
Zoom one scene in, crossfade, zoom the next out
dissolve()
HTML-in-canvas
Burn through the previous scene with a glowing edge
ripple()
HTML-in-canvas
Ripple the outgoing scene with a sinusoidal wave
crosswarp()
HTML-in-canvas
Warp both scenes across the x-axis and blend them
crossZoom()
HTML-in-canvas
Zoom both scenes through a moving center and blur
swap()
HTML-in-canvas
Swap scenes with perspective and reflections
blurSlide()
HTML-in-canvas
Whip both scenes sideways with a motion blur
cube()
Paid
Rotate both scenes with 3D perspective
none()
Have no visual effect.
Audio transitions
Add a sound effect to a transition

License​

Remotion License

See also​