# Precompositions
Precompositions (precomps) are self-contained nested scenes that help you organize complex animations, create reusable components, and build hierarchical projects.

## What are precompositions?

A precomposition is a composition nested within another composition.

<Image src="https://assets.docs.lottiefiles.com/static/f24eaf93fa-640.webp" alt="Precomp" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/f24eaf93fa-640.webp 640w, https://assets.docs.lottiefiles.com/static/f24eaf93fa-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/f24eaf93fa-1920.webp 1920w" width="3200" height="1800" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAACxLAAAsSwGlPZapAAAAk0lEQVR4nD3NPwuCQABA8ftiBS6BnuegeP4hxdPTJWlpsaCiwa2hrSkIau8DOrwoouG3PXjCTxs+VGpxE0tQWFbrDTLtUJmdhExqpDZ4iSHKeg77M8N1ZBFbgrxDOL7G8ULmMiIuesrHhdlrJN8OuFGN+C6SGl8bZNHT33bcnxXL4wk3NL/gr8XPLaqskLpBZe30BgaIVIt4Kp6YAAAAAElFTkSuQmCC" />

**Precomp fundamentals:**

<List type="bullet">
  <ListItem>**Precomposition Asset** — the actual nested scene (lives in assets)</ListItem>
  <ListItem>**Precomposition Layer** — reference to the asset (lives in timeline)</ListItem>
  <ListItem>One asset can be used by multiple layers (instances)</ListItem>
</List>

**Why use precompositions:**

<List type="bullet">
  <ListItem>**Organization:** Break complex scenes into manageable pieces</ListItem>
  <ListItem>**Reusability:** Create once, use multiple times</ListItem>
  <ListItem>**Isolation:** Animation independent from parent</ListItem>
  <ListItem>**Performance:** Organize logically for easier editing</ListItem>
</List>

## Creating precompositions

1. Select layers in timeline/outliner
2. Right-click → **Create Scene** (or shift + cmd/ctrl + c)
3. The selected layers are moved into a new precomp
4. A precomposition layer is created at their position

<Image src="https://assets.docs.lottiefiles.com/static/0cfeedbdd6-640.webp" alt="Create Scene" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/0cfeedbdd6-640.webp 640w, https://assets.docs.lottiefiles.com/static/0cfeedbdd6-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/0cfeedbdd6-1920.webp 1920w" width="3200" height="1800" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAACxLAAAsSwGlPZapAAAAnElEQVR4nEXOvQqCUABAYcceoKElCW6R9OtQ1CIRaajpEImpRUpWEkRb0dYjtPS2BifCof3wcSQnSDHXR4zogmYuUccavZGG7Sc4QZpLVpiRbCOe+wXjyZyKXKNaVzC9HW54QFptUt5ng8+txMOQKYsuQmlheXER2OGJe+zyOurMZjqirdLsD/7C70H3M/ToynBqURUNakoHsxDyL00eS0aOhNRwAAAAAElFTkSuQmCC" />

## Precomp properties

**Standard properties:**

<List type="bullet">
  <ListItem>Transform (position, rotation, scale, opacity)</ListItem>
  <ListItem>Blend mode</ListItem>
  <ListItem>Visibility and lock state</ListItem>
  <ListItem>Parent (can be parented to other layers)</ListItem>
</List>

**Precomp-specific:**

<List type="bullet">
  <ListItem>**Precomp Size** — width and height of nested scene</ListItem>
  <ListItem>**Bounds Mode** — Scene bounds vs fit to content</ListItem>
  <ListItem>**Referenced Asset** — which precomp asset it uses</ListItem>
</List>

## Bounds modes

**Scene Bounds (Default):**

<List type="bullet">
  <ListItem>Bounding box matches full scene size</ListItem>
  <ListItem>Consistent dimensions regardless of content</ListItem>
  <ListItem>Transform handles at scene edges</ListItem>
</List>

**Fit to Content:**

<List type="bullet">
  <ListItem>Bounding box wraps visible content tightly</ListItem>
  <ListItem>Bounds adjust if content changes</ListItem>
  <ListItem>More efficient for small content in large scene</ListItem>
</List>

## Working with multiple precomps

**Reusing precomps:**

1. Create a Precomposition Asset once
2. Add multiple Precomposition Layers referencing it
3. Each instance shares the same content
4. Edit asset updates all instances

**Breaking precompositions:**

1. Select Precomposition Layer
2. Right-click → **Break Scene** (or shift + cmd/ctrl + b)
3. Precomp layers move to parent scene
4. Precomposition Layer is removed

## Precomp timeline

**Independent timeline:**

<List type="bullet">
  <ListItem>Each precomp has own timeline duration</ListItem>
  <ListItem>Own frame rate (typically matches main scene)</ListItem>
  <ListItem>Independent keyframes and animations</ListItem>
  <ListItem>Separate work area</ListItem>
</List>

**Duration management:**

<List type="bullet">
  <ListItem>Define when creating precomp</ListItem>
  <ListItem>Matches main scene by default</ListItem>
  <ListItem>Can extend or shorten as needed by dragging from its left or right edges</ListItem>
  <ListItem>Dark green area shows clipped portion. Light green shows visible duration.</ListItem>
</List>

<Image src="https://assets.docs.lottiefiles.com/static/5fbad1d38d-640.webp" alt="Precomp Timeline" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/5fbad1d38d-640.webp 640w, https://assets.docs.lottiefiles.com/static/5fbad1d38d-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/5fbad1d38d-1920.webp 1920w" width="2560" height="1440" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAACxLAAAsSwGlPZapAAAAiklEQVR4nD3G0QqCMAAF0P1EhgVtNqPGiGVFGviUS1RosxLm6v8/wqcbiPRw4JDy+cW9/UBbP+n/L4wfCN1JBJQjWK0h5B5bdQaXCeIJYUJhHm0wYxzqmiO3DmnrkL38iMTqAiaPoCJBdDhhmWZYVCVC2yA0NcjNOBS2H2nTQz8cdNNB1x2K6j38AJMoQ/ksRt09AAAAAElFTkSuQmCC" />
