Skip to main content

Timings

A timing together with a presentation forms a transition.
Remotion provides certain timings out of the box, but you can also create your own.

Available timings​

springTiming()
Transition with a spring()
linearTiming()
Transition linearly with optional Easing
Custom timings
Implement your own timing

Getting the duration of a timing​

You can get the duration of a transition by calling getDurationInFrames() on the timing:

Assuming a framerate of 30fps
tsx
import { springTiming } from "@remotion/transitions";
 
springTiming({ config: { damping: 200 } }).getDurationInFrames({ fps: 30 }); // 23
Assuming a framerate of 30fps
tsx
import { springTiming } from "@remotion/transitions";
 
springTiming({ config: { damping: 200 } }).getDurationInFrames({ fps: 30 }); // 23