Chapter 962: How do I combine compositions?

Core Idea

Say you have two compositions, One and Two:

Key Concepts

• How do I avoid hardcoding the duration?
• How do I transition between compositions?
• How does this scale?
• See also

Code Examples

// @filename: One.tsx
export const One: React.FC = () => {
  return <div>One</div>;
};

// @filename: Two.tsx
export const Two: React.FC = () => {
  return <div>Two</div>;
};

// @filename: Root.tsx

export const Root: React.FC = () => {
  return (
    <>
      <Composition
        id="One"
        component={One}
        width={1080}
        height={1080}
        fps={30}
        durationInFrames={120}
      />
      <Composition
        id="Two"
        component={Two}
        width={1080}
        height={1080}
        fps={30}
        durationInFrames={120}
      />
    </>
  );
};

• What it demonstrates: Usage pattern for How do I combine compositions? from the official docs.

Key Takeaways

1. Understand how do i avoid hardcoding the duration? when working with How do I combine compositions?.
2. Understand how do i transition between compositions? when working with How do I combine compositions?.
3. Understand how does this scale? when working with How do I combine compositions?.
4. Understand see also when working with How do I combine compositions?.

Connects To

• 4 0 Alpha: related page in the Miscellaneous (Core) section.
• ai: related page in the Miscellaneous (Core) section.
• Animated Emoji: related page in the Miscellaneous (Core) section.