1---
2name: timing
3description: Interpolation curves in Remotion - linear, easing, spring animations
4metadata:
5  tags: spring, bounce, easing, interpolation
6---
7 
8A simple linear interpolation is done using the `interpolate` function.
9 
10```ts title="Going from 0 to 1 over 100 frames"
11import { interpolate } from "remotion";
12 
13const opacity = interpolate(frame, [0, 100], [0, 1]);
14```
15 
16By default, the values are not clamped, so the value can go outside the range [0, 1].  
17Here is how they can be clamped:
18 
19```ts title="Going from 0 to 1 over 100 frames with extrapolation"
20const opacity = interpolate(frame, [0, 100], [0, 1], {
21  extrapolateRight: "clamp",
22  extrapolateLeft: "clamp",
23});
24```
25 
26## Spring animations
27 
28Spring animations have a more natural motion.  
29They go from 0 to 1 over time.
30 
31```ts title="Spring animation from 0 to 1 over 100 frames"
32import { spring, useCurrentFrame, useVideoConfig } from "remotion";
33 
34const frame = useCurrentFrame();
35const { fps } = useVideoConfig();
36 
37const scale = spring({
38  frame,
39  fps,
40});
41```
42 
43### Physical properties
44 
45The default configuration is: `mass: 1, damping: 10, stiffness: 100`.  
46This leads to the animation having a bit of bounce before it settles.
47 
48The config can be overwritten like this:
49 
50```ts
51const scale = spring({
52  frame,
53  fps,
54  config: { damping: 200 },
55});
56```
57 
58The recommended configuration for a natural motion without a bounce is: `{ damping: 200 }`.
59 
60Here are some common configurations:
61 
62```tsx
63const smooth = { damping: 200 }; // Smooth, no bounce (subtle reveals)
64const snappy = { damping: 20, stiffness: 200 }; // Snappy, minimal bounce (UI elements)
65const bouncy = { damping: 8 }; // Bouncy entrance (playful animations)
66const heavy = { damping: 15, stiffness: 80, mass: 2 }; // Heavy, slow, small bounce
67```
68 
69### Delay
70 
71The animation starts immediately by default.  
72Use the `delay` parameter to delay the animation by a number of frames.
73 
74```tsx
75const entrance = spring({
76  frame: frame - ENTRANCE_DELAY,
77  fps,
78  delay: 20,
79});
80```
81 
82### Duration
83 
84A `spring()` has a natural duration based on the physical properties.  
85To stretch the animation to a specific duration, use the `durationInFrames` parameter.
86 
87```tsx
88const spring = spring({
89  frame,
90  fps,
91  durationInFrames: 40,
92});
93```
94 
95### Combining spring() with interpolate()
96 
97Map spring output (0-1) to custom ranges:
98 
99```tsx
100const springProgress = spring({
101  frame,
102  fps,
103});
104 
105// Map to rotation
106const rotation = interpolate(springProgress, [0, 1], [0, 360]);
107 
108<div style={{ rotate: rotation + "deg" }} />;
109```
110 
111### Adding springs
112 
113Springs return just numbers, so math can be performed:
114 
115```tsx
116const frame = useCurrentFrame();
117const { fps, durationInFrames } = useVideoConfig();
118 
119const inAnimation = spring({
120  frame,
121  fps,
122});
123const outAnimation = spring({
124  frame,
125  fps,
126  durationInFrames: 1 * fps,
127  delay: durationInFrames - 1 * fps,
128});
129 
130const scale = inAnimation - outAnimation;
131```
132 
133## Easing
134 
135Easing can be added to the `interpolate` function:
136 
137```ts
138import { interpolate, Easing } from "remotion";
139 
140const value1 = interpolate(frame, [0, 100], [0, 1], {
141  easing: Easing.inOut(Easing.quad),
142  extrapolateLeft: "clamp",
143  extrapolateRight: "clamp",
144});
145```
146 
147The default easing is `Easing.linear`.  
148There are various other convexities:
149 
150- `Easing.in` for starting slow and accelerating
151- `Easing.out` for starting fast and slowing down
152- `Easing.inOut`
153 
154and curves (sorted from most linear to most curved):
155 
156- `Easing.quad`
157- `Easing.sin`
158- `Easing.exp`
159- `Easing.circle`
160 
161Convexities and curves need be combined for an easing function:
162 
163```ts
164const value1 = interpolate(frame, [0, 100], [0, 1], {
165  easing: Easing.inOut(Easing.quad),
166  extrapolateLeft: "clamp",
167  extrapolateRight: "clamp",
168});
169```
170 
171Cubic bezier curves are also supported:
172 
173```ts
174const value1 = interpolate(frame, [0, 100], [0, 1], {
175  easing: Easing.bezier(0.8, 0.22, 0.96, 0.65),
176  extrapolateLeft: "clamp",
177  extrapolateRight: "clamp",
178});
179```
180