Cuts
Transition Slide
Slide transition helper for TransitionSeries.
Primitivecuts
Install
npx remotion-ui@latest add transition-slideExports transitionSlide() and getTransitionSlideDuration() for use with TransitionSeries.Transition.
Returns a config object for `TransitionSeries.Transition`, not a React component.
AI usage
Install first, then import the copied source component locally.
Install
npx remotion-ui@latest add transition-slideImport after install
@/remotion/primitives/transition-slide- Use when: scene transitions and composition pacing.
- Customize: durationInFrames, direction, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { transitionSlide } from "@/remotion/primitives/transition-slide";
<TransitionSeries.Transition
{...transitionSlide({ direction: "from-left", durationInFrames: 20 })}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| durationInFrames | number | 20 | Overlap duration between scenes. |
| direction | string | "from-right" | Slide direction: from-left, from-right, from-top, from-bottom. |