> For the complete documentation index, see [llms.txt](https://viridian-games.gitbook.io/pixel-palette/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://viridian-games.gitbook.io/pixel-palette/core-components/animation-system.md).

# Animation System

<figure><img src="/files/4x3f60z3XvWKBYsm5dvp" alt=""><figcaption></figcaption></figure>

Think of it like a flipbook — each **frame** is a snapshot of everything on your canvas at that moment.

**Frames are independent** — drawing on frame 3 won't mess up frame 2. Each frame saves every layer's pixels, visibility, and opacity as a separate copy.

#### Frames Timeline

| What you can do        | How                                                                                                                    |
| ---------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| **Add Frame**          | Clones the current frame and inserts it right after. Now you have a clean copy to draw the next pose in your animation |
| **Duplicate Frame**    | Makes a copy wherever you want in the list                                                                             |
| **Delete Frame**       | Removes it. You always keep at least one frame                                                                         |
| **Reorder**            | Drag frames around to change the order (just like rearranging paper in a flipbook)                                     |
| **Switch Frames**      | Click a frame to jump to it. The canvas instantly shows what was drawn on that frame                                   |
| **Save Current Frame** | Before switching, the current frame is auto-saved — so your latest scribbles aren't lost                               |

#### Playing Back

Hit **Play** and the frames cycle through one by one at the speed you set (FPS = frames per second). Default is 12 FPS (standard for pixel art animation).

#### Onion Skinning

A faded ghost of the previous frame shows through so you can line up your next drawing. You see the previous frame at 30% opacity underneath your current strokes. Toggle it on/off.

#### Frame Contents

Each frame doesn't just save what you see — it saves every layer separately (pixels, visibility, opacity). So if layer 2 was hidden in frame 1 and visible in frame 2, that's preserved.

When you switch frames, the system:

1. Saves whatever you were working on to the old frame
2. Loads the new frame's layers onto the canvas
3. Refreshes the screen


---

# 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:

```
GET https://viridian-games.gitbook.io/pixel-palette/core-components/animation-system.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.