Chapter 10: <Folder>

Core Idea

<AvailableFrom v="3. 0.

Key Concepts

• Example
• Folder behavior
• Compatibility
• See also

Code Examples

const Component: React.FC = () => null;

export const Video = () => {
  return (
    <>
      <Folder name="Visuals">
        <Composition id="CompInFolder" durationInFrames={100} fps={30} width={1080} height={1080} component={Component} />
      </Folder>
      <Composition id="CompOutsideFolder" durationInFrames={100} fps={30} width={1080} height={1080} component={Component} />
    </>
  );
};

• What it demonstrates: Usage pattern for <Folder> from the official docs.

Key Takeaways

1. Understand example when working with <Folder>.
2. Understand folder behavior when working with <Folder>.
3. Understand compatibility when working with <Folder>.
4. Understand see also when working with <Folder>.

Connects To

• Absolute Fill: related page in the Fundamentals & Core Concepts section.
• Animating Properties: related page in the Fundamentals & Core Concepts section.
• Animation Math: related page in the Fundamentals & Core Concepts section.