1---
2name: timing
3description: Interpolation and timing in Remotion—prefer interpolate with Bézier easing; springs as a specialized option
4metadata:
5  tags: easing, bezier, interpolation, spring, timing
6---
7 
8Drive motion with `interpolate()` over an explicit frame range. Prefer `interpolate()` over `spring()` unless the user explicitly asks for physics-based motion. To customize timing, use **`Easing.bezier`**. The four parameters are the same as CSS `cubic-bezier(x1, y1, x2, y2)`.
9 
10A simple linear interpolation is done using the `interpolate` function.
11 
12```ts title="Going from 0 to 1 over 100 frames"
13import { interpolate } from "remotion";
14 
15const opacity = interpolate(frame, [0, 100], [0, 1]);
16```
17 
18By default, the values are not clamped, so the value can go outside the range [0, 1].  
19Here is how they can be clamped:
20 
21```ts title="Going from 0 to 1 over 100 frames with extrapolation"
22const opacity = interpolate(frame, [0, 100], [0, 1], {
23  extrapolateRight: "clamp",
24  extrapolateLeft: "clamp",
25});
26```
27 
28## Studio-editable animation patterns
29 
30When an animation should be editable in Remotion Studio, keep the `interpolate()` call directly in the `style` prop and prefer individual CSS transform properties:
31 
32```tsx
33style={{
34  scale: interpolate(frame, [0, 100], [0, 1]),
35  translate: interpolate(frame, [0, 100], ["0px 0px", "100px 100px"]),
36  rotate: interpolate(frame, [0, 100], ["20deg", "90deg"]),
37}}
38```
39 
40Avoid extracting the value and composing a `transform` string:
41 
42```tsx
43const scale = interpolate(frame, [0, 100], [0, 1]);
44 
45style={{
46  transform: `scale(${scale})`,
47}}
48```
49 
50Use `transform` strings only when individual CSS transform properties do not cover the effect, such as `skew()`, `perspective()`, or order-sensitive multi-transform chains.
51 
52## Bézier easing
53 
54Use `Easing.bezier(x1, y1, x2, y2)` inside the `interpolate` options object. The curve is identical in spirit to CSS animations and transitions, which helps when you are stealing timing from the web or from a designer’s spec.
55 
56```ts
57import { interpolate, Easing } from "remotion";
58 
59const opacity = interpolate(frame, [0, 60], [0, 1], {
60  easing: Easing.bezier(0.16, 1, 0.3, 1),
61  extrapolateLeft: "clamp",
62  extrapolateRight: "clamp",
63});
64```
65 
66### Examples (copy-paste curves)
67 
68**1. Crisp UI entrance (strong ease-out, no overshoot)** — slows nicely into the rest value; similar to many system “deceleration” curves.
69 
70```tsx
71const enter = interpolate(frame, [0, 45], [0, 1], {
72  easing: Easing.bezier(0.16, 1, 0.3, 1),
73  extrapolateLeft: "clamp",
74  extrapolateRight: "clamp",
75});
76```
77 
78**2. Editorial / slow fade (balanced ease-in-out)** — symmetric acceleration and deceleration over a hold-friendly move.
79 
80```tsx
81const progress = interpolate(frame, [0, 90], [0, 1], {
82  easing: Easing.bezier(0.45, 0, 0.55, 1),
83  extrapolateLeft: "clamp",
84  extrapolateRight: "clamp",
85});
86```
87 
88**3. Playful overshoot (control point y > 1)** — a little past the target then settles; use sparingly for emphasis.
89 
90```tsx
91const pop = interpolate(frame, [0, 30], [0, 1], {
92  easing: Easing.bezier(0.34, 1.56, 0.64, 1),
93  extrapolateLeft: "clamp",
94  extrapolateRight: "clamp",
95});
96```
97 
98## Preset easings (`Easing.in` / `Easing.out` / named curves)
99 
100Easing can be added to the `interpolate` function without a custom cubic:
101 
102```ts
103import { interpolate, Easing } from "remotion";
104 
105const value1 = interpolate(frame, [0, 100], [0, 1], {
106  easing: Easing.inOut(Easing.cubic),
107  extrapolateLeft: "clamp",
108  extrapolateRight: "clamp",
109});
110```
111 
112The default easing is `Easing.linear`.  
113Convexities:
114 
115- `Easing.in` — starting slow and accelerating
116- `Easing.out` — starting fast and slowing down
117- `Easing.inOut`
118 
119Named curves (from most linear to most curved):
120 
121- `Easing.quad`
122- `Easing.cubic` (good default when you do not need a custom cubic)
123- `Easing.sin`
124- `Easing.exp`
125- `Easing.circle`
126 
127### Easing direction for enter/exit animations
128 
129Use `Easing.out` for enter animations (starts fast, decelerates into place) and `Easing.in` for exit animations (starts slow, accelerates away). This feels natural because elements arrive with momentum and leave with gravity. When you need a specific curve from design, prefer a single `Easing.bezier(...)` instead of stacking presets.
130 
131## Composing interpolations
132 
133When multiple properties share the same timing and do not need Studio keyframe editing (e.g. a slide-in panel and a video shift), avoid duplicating the full interpolation for each property. Instead, create a single normalized progress value (0 to 1) and derive each property from it:
134 
135```tsx
136const slideIn = interpolate(
137  frame,
138  [slideInStart, slideInStart + slideInDuration],
139  [0, 1],
140  {
141    easing: Easing.bezier(0.22, 1, 0.36, 1),
142    extrapolateLeft: "clamp",
143    extrapolateRight: "clamp",
144  },
145);
146const slideOut = interpolate(
147  frame,
148  [slideOutStart, slideOutStart + slideOutDuration],
149  [0, 1],
150  { easing: Easing.in(Easing.cubic), extrapolateLeft: "clamp", extrapolateRight: "clamp" },
151);
152const progress = slideIn - slideOut;
153 
154// Derive multiple properties from the same progress
155const overlayX = interpolate(progress, [0, 1], [100, 0]);
156const videoX = interpolate(progress, [0, 1], [0, -20]);
157const opacity = interpolate(progress, [0, 1], [0, 1]);
158```
159 
160The key idea: separate **timing** (when and how fast) from **mapping** (what values to animate between).
161 
162If the values should be visually keyframed in Studio, prefer inline `interpolate()` calls in the relevant style props, even if it duplicates the timing.
163