Scale In
Grow into place from just under full size, with an optional spring and exit.
PrimitivePrimitives
scale-in30fps · 960×540
Install
$ npx remotion-ui@latest add scale-inGrows from from to full size, with opacity leading the scale.
from stays close to 1 on purpose: a card scaling up from 0.5 reads as a zoom, which is a camera move rather than an arrival. Anything below ~0.85 wants spring behind it.
Anything below ~0.85 wants a spring behind it, or the growth reads as a camera zoom.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/primitives/scale-in- 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 { ScaleIn } from "@/remotion/primitives/scale-in";
<ScaleIn from={0.9} spring="snappy">
<img src={staticFile("logo.png")} />
</ScaleIn>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. |
| from | number | 0.92 | Scale at the start of the entrance. |
| origin | TransformOrigin | "center" | Corner or edge the scale grows out of. |