Spring In
Spring-driven scale and rise, with snappy, smooth and bouncy presets.
PrimitivePrimitives
spring-in30fps · 960×540
Install
$ npx remotion-ui@latest add spring-inScale and a short rise driven by spring(), so the element carries weight into its stop instead of easing to a halt.
config="bouncy" overshoots — both the scale and the rise pass their resting value and settle back, which is the reason to use a spring at all.
`config="bouncy"` overshoots both the scale and the rise, then settles — the reason to use a spring at all.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/primitives/spring-in- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: durationInFrames, delayInFrames, exit, exitInFrames, 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 { SpringIn } from "@/remotion/primitives/spring-in";
<SpringIn config="bouncy" durationInFrames={40}>
<div>Physical entrance</div>
</SpringIn>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. |
| 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. |
| config | "smooth" | "snappy" | "bouncy" | Partial<SpringConfig> | "snappy" | Spring preset, or an override on the snappy config. |
| from | number | 0.88 | Scale at the start of the entrance. |
| travel | number | scaled 14px | How far it rises as it springs. |
| origin | TransformOrigin | "center" | Point the scale grows from. |