Slide Up
Rise into place, with an optional mask reveal and an automatic exit.
PrimitivePrimitives
slide-up30fps · 960×540
Install
$ npx remotion-ui@latest add slide-upRises into place while opacity leads the travel: the fade is finished at 55% of the move, so the element lands solid rather than still resolving as it stops.
mask clips the child to its own box so it rises out of a mask instead — the editorial move for a headline. Under a mask the travel defaults to the element's own height, which is the only distance that actually clears it.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/primitives/slide-up- 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 { SlideUp } from "@/remotion/primitives/slide-up";
<SlideUp mask exit>
<h1>Title</h1>
</SlideUp>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 40px | Vertical offset in pixels at the start. Under mask, defaults to the element's own height. |
| mask | boolean | false | Clip the child to its own box so it rises out of a mask instead of fading up. |
| maskPadding | number | 0 | Extra room inside the mask so descenders are not clipped. |