Slide Left
Slide in from either side, with an optional mask reveal and an automatic exit.
PrimitivePrimitives
slide-left30fps · 960×540
Install
$ npx remotion-ui@latest add slide-leftSlides in on the horizontal — the reading axis, so it suits list rows and lower thirds where a rise would fight the line above.
Set from="right" to come in from the other side, or mask to slide out of a clipped box.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/primitives/slide-left- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: durationInFrames, delayInFrames, spring, exit, 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
Example
import { SlideLeft } from "@/remotion/primitives/slide-left";
<SlideLeft distance={60} from="left">
<p>Slide in from the left</p>
</SlideLeft>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactNode | - | Content to animate. |
| durationInFrames | number | 30 | Length of the enter animation in frames. |
| delayInFrames | number | 0 | Frames to wait before the animation starts. |
| spring | "smooth" | "snappy" | "bouncy" | Partial<SpringConfig> | boolean | - | Drive the entrance with a spring instead of the ease-out curve. |
| exit | boolean | false | Animate back out, landing on the last frame of the surrounding Sequence. |
| exitInFrames | number | 70% of durationInFrames | Length of the exit. Exits are shorter than entrances. |
| exitAtInFrames | number | - | Frame the exit starts on, overriding the end-of-window timing. |
| exitTravel | number | 0.6 | Share of the enter distance the exit travels. |
| exitDirection | "reverse" | "continue" | "reverse" | reverse leaves the way it came in, continue carries on through. |
| block | boolean | false | Fill the parent's width instead of shrink-wrapping the child. |
| style | CSSProperties | - | Styles merged onto the wrapper. |
| distance | number | scaled 60px | Horizontal offset in pixels at the start. Under mask, defaults to the element's own width. |
| from | "left" | "right" | "left" | Side the child travels in from. |
| mask | boolean | false | Clip the child to its own box so it slides out of a mask. |