# Creating a multi-animation bundle
Combine several animations into one .lottie file with dotLottie Composer.

Use dotLottie Composer when related animations should ship as one bundle with stable IDs and a defined initial animation.

## Open Composer

1. Open **Utilities**.
2. Select **dotLottie Composer**.
3. Add the source animations.

<Image src="https://assets.docs.lottiefiles.com/static/ee95b2e64d-640.webp" alt="dotLottie Composer animation and bundle settings in VS Code" caption="dotLottie Composer animation and bundle settings in VS Code" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/ee95b2e64d-640.webp 640w, https://assets.docs.lottiefiles.com/static/ee95b2e64d-1024.webp 1024w" width="1376" height="1154" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA00lEQVR4nC3KS0rDQACA4TmD4soH5mHiYCg2A1WsQceJlJAYxQepQtWpBioVuuvGnYdz4cprCG68QH6Juvh2nzDFZTOdzZm/vHKUn3NyU1MMxxTDh1YjEpPx9v7B59c3fT2gbENl/9MYkaQ5dT1h+jxjTw84Gz1RXD/+xpZIjgscZ52lxQV6fU12dUd6WmHKirSs/kIYBHhSorRhK9gkCiWB57PhuIh9k7G2sowvQ7YPDnHjLq7q4quY1U6E0PlF01E9YrXLjskIrEXaeyJr8W5HzQ/nrmhCPJtYcwAAAABJRU5ErkJggg==" />

Use animation IDs that describe runtime meaning, such as `idle`, `loading`, `success`, and `error`. Avoid IDs based only on temporary filenames.

## Configure the bundle

Composer lets you:

- Add several animations.
- Set or edit animation IDs.
- Arrange their order.
- Choose the initial animation.
- Configure supported playback behavior.
- Add bundle metadata.

Review duplicate IDs before building. Runtime selection depends on each ID being unique.

## Build and download

Build the bundle and save the generated `.lottie` file into the project or another intentional destination. Reopen it with the extension and verify:

- All animations are present.
- The expected animation is initial.
- IDs match the integration code.
- Playback works for every child.
- Manifest metadata is correct.

## Composer scope

Composer currently authors the animation bundle. It does not provide controls for creating theme definitions or state machines. Do not assume embedded themes or state machines from an input will be authored or merged; verify the built output before relying on them.

## Integrate the bundle

Keep the `.lottie` format and select animations by ID in a dotLottie runtime. Exporting the bundle to JSON keeps only one active animation.

## Related

- [Working with multi-animation files](/en/integrations/vscode/04_inspect/working-with-multi-animation-files)
- [Generating integration code](/en/integrations/vscode/05_integrate/generating-integration-code)