Chapter 665: springTiming()

Core Idea

A timing function for <TransitionSeries> based on spring().

Key Concepts

• API
• config?
• durationInFrames?
• durationRestThreshold?
• reverse?<AvailableFrom v="4.0.144" />
• Recommendation: Set a low duration rest threshold

Code Examples

const Letter: React.FC<{
  children: React.ReactNode;
  color: string;
}> = ({children, color}) => {
  return (
    <AbsoluteFill
      style={{
        backgroundColor: color,
        opacity: 0.9,
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 200,
        color: 'white',
      }}
    >
      {children}
    </AbsoluteFill>
  );
};

const BasicTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={slide()}
        timing={springTiming({
          config: {
            damping: 200,
          },
          durationInFrames: 30,
          durationRestThreshold: 0.001,
        })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

• What it demonstrates: Usage pattern for springTiming() from the official docs.

Key Takeaways

1. Understand api when working with springTiming().
2. Understand config? when working with springTiming().
3. Understand durationinframes? when working with springTiming().
4. Understand durationrestthreshold? when working with springTiming().
5. Understand reverse?<availablefrom v="4.0.144" /> when working with springTiming().

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.