Skip to main content
14 transition presets for TransitionSeries. Each returns a TransitionPresentation you pass to <TransitionSeries.Transition>.

​
Usage

import { TransitionSeries, springTiming } from '@remotion/transitions';
import { fadeBlur, wipe, scaleFade } from '@oanim/core';

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={120}>
    <Scene1 />
  </TransitionSeries.Sequence>

  <TransitionSeries.Transition
    presentation={fadeBlur()}
    timing={springTiming({ config: { damping: 200 }, durationInFrames: 30 })}
  />

  <TransitionSeries.Sequence durationInFrames={120}>
    <Scene2 />
  </TransitionSeries.Sequence>
</TransitionSeries>

​
Available transitions

PresetEffect
fadeBlur()Crossfade with blur
scaleFade()Scale 0.95 to 1 with fade
clipCircle()Circular reveal
clipPolygon()Diamond/polygon reveal
wipe()Directional wipe
splitHorizontal()Open from horizontal center
splitVertical()Open from vertical center
perspectiveFlip()3D flip
morphExpand()Scale up from circle to full
zoomThrough()Zoom into next scene
pushLeft()Push current scene left
pushRight()Push current scene right
slideLeft()New scene slides in from right
slideRight()New scene slides in from left

​
wipe options

The wipe() transition accepts a direction: 
wipe({ direction: 'left' })   // wipe from right to left
wipe({ direction: 'right' })  // wipe from left to right
wipe({ direction: 'up' })     // wipe from bottom to top
wipe({ direction: 'down' })   // wipe from top to bottom

​
Transition timing

Use springTiming or linearTiming from @remotion/transitions: 
import { springTiming, linearTiming } from '@remotion/transitions';

// Spring timing — smooth, natural feel
springTiming({ config: { damping: 200 }, durationInFrames: 30 })

// Linear timing — constant speed
linearTiming({ durationInFrames: 20 })

​
Timing guidelines

SpeedFramesFeel
Fast15-20Energetic, snappy
Medium25-35Professional, smooth
Slow40-60Cinematic, dramatic
Use springTiming with high damping (200) for smooth transitions. Use linearTiming for constant-speed transitions.

​
Combining transitions in a sequence

Mix different transitions for variety: 
<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={120}>
    <Scene1 />
  </TransitionSeries.Sequence>

  <TransitionSeries.Transition
    presentation={fadeBlur()}
    timing={springTiming({ config: { damping: 200 }, durationInFrames: 30 })}
  />

  <TransitionSeries.Sequence durationInFrames={120}>
    <Scene2 />
  </TransitionSeries.Sequence>

  <TransitionSeries.Transition
    presentation={wipe({ direction: 'left' })}
    timing={springTiming({ config: { damping: 200 }, durationInFrames: 25 })}
  />

  <TransitionSeries.Sequence durationInFrames={120}>
    <Scene3 />
  </TransitionSeries.Sequence>
</TransitionSeries>