Chapter 663: Custom timings

Core Idea

This page describes how to create your own custom timings for <TransitionSeries>.

Key Concepts

• Concept
• Implementation
• Advanced example
• Using a custom timing
• Getting the duration of a timing
• References
• See also

Code Examples

const customTiming = (): TransitionTiming => {
  return {
    getDurationInFrames: ({ fps }) => fps, // 1 second
    getProgress: ({ frame, fps }) => Math.min(1, frame / fps),
  };
};

• What it demonstrates: Usage pattern for Custom timings from the official docs.

Key Takeaways

1. Understand concept when working with Custom timings.
2. Understand implementation when working with Custom timings.
3. Understand advanced example when working with Custom timings.
4. Understand using a custom timing when working with Custom timings.
5. Understand getting the duration of a timing when working with Custom timings.

Connects To

• Audio Transitions: related page in the Transitions (@remotion/transitions) section.
• Make Html in Canvas Presentation: related page in the Transitions (@remotion/transitions) section.
• Presentations: related page in the Transitions (@remotion/transitions) section.