> For the complete documentation index, see [llms.txt](https://docs.flatredball.com/gum/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flatredball.com/gum/gum-tool/tutorials-and-examples/animation-tutorials/playing-animations-inside-other-animations.md).

# 3 - Playing Animations inside other Animations

## Introduction

Gum supports creating animations which can play other animations. This is especially useful when creating animations in Screens that contain components which themselves have animations. This tutorial will build upon the [previous tutorial](/gum/gum-tool/tutorials-and-examples/animation-tutorials/creating-an-animation.md) where we created an animated component called TextComponent.

## Creating a Screen

First we'll create a Screen called AnimatedScreen. To do this:

1. Right-click on Screens
2. Select "Add Screen"
3. Enter the name "AnimatedScreen" and click the OK button
4. Drag+drop a few TextComponents into the Screen and spread them out visually

![](/files/-Mb9Sl_GbB2J9AKuLhpw)

## Defining the initial state

The animation we will be creating in our Screen will start with all TextComponents being invisible, then each one appearing by playing their Show animation. The animations will be slightly staggered. First we'll add the initial state where all of the TextComponents are invisible. To do this:

1. Verify that the AnimatedScreen is selected
2. Right-click in the states area and select "Add Category" name it "ScreenCategory"
3. Right-click the category and select "Add State"
4. Name the state "AllInvisible" and click OK
5. Click to select the "AllInvisible" state.
6. Select one of the TextComponents
7. Set its **HideShow** State to **Hidden**
8. Repeat setting the State to Hidden for the other TextComponents

![](/files/uQjN58Zz8cF7IHQinpxQ)

## Creating the Animation

Now we have all of the states and animations that we'll use as keyframes in our animation. To create the animation:

1. Select AnimatedScreen
2. Select "View" -> "View Animations"
3. Click "Add Animation"
4. Name the animation "ShowAll"
5. Select the ShowAll animation
6. Click "Add State"
7. Select "ScreenCategory/AllInvisible" and click OK

The animation now sets all TextComponents to their Hidden state initially.

![](/files/-Mb9Sl_I9_6F74t2S_c7)

## Adding Sub-Animations

Next we'll be adding animations to animate the TextComponent instances to visible. To do this:

1. Bring up the animation window for AnimatedScreen if it is not already showing
2. Select "ShowAll"
3. Click "Add Sub-animation"
4. Select the first TextComponentInstance
5. Select the **Show** animation and click **OK**
6. Select the newly-created animation and set its Time to 0.5
7. Repeat the above steps to add animations for the other two TextComponents, but set their times to 1.0 and 1.5

![](/files/HDtCzowSnOm1aMblnmrE)

Now the animation can be played or previewed with the slider bar:

![](/files/-Mb9Sl_K9_T03Sh0RaXa)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.flatredball.com/gum/gum-tool/tutorials-and-examples/animation-tutorials/playing-animations-inside-other-animations.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.