# Animation Builder

The Animation Builder widget is a powerful tool for creating custom animations. It listens to a `controller` (PageController or ScrollController) and rebuilds its child widget whenever the `controller`'s value changes. This allows you to create animations that are driven by scrolling or paging interactions.

{% embed url="<https://www.youtube.com/watch?v=NqFTy8HhiC8>" %}

Watch this on Youtube: <https://www.youtube.com/watch?v=NqFTy8HhiC8>

### Core Concepts

1. **Controller-Driven Rebuilds**
   * The `Controller` property accepts a **PageController or ScrollController**.
   * Whenever the controller's value changes (scroll position or page index), the **Animation Builder rebuilds its child**.
2. **Value-Based Animations**
   * Inside the child, you can access the controller's current values (scroll offset, page index) to drive animations.
   * This allows creating animations that respond to scroll or page changes.
3. **Separation of Logic & UI**
   * The controller handles **scrolling or paging behavior**.
   * The Animation Builder handles **how those changes are visualized** in the UI.

### Properties

| Property     | Description                                                                                                                                                            |
| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `Controller` | A PageController or ScrollController variable that provides scroll or page values. When this value changes, the child widget of the Animation Builder will be rebuilt. |

#### Child of Animation Builder

| Slot    | Description                                                                                                                                                                  |
| ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `Child` | The widget to be rebuilt whenever the `controller`'s value changes. The child can access the controller's current values (scroll offset or page index) to create animations. |

### Default Properties

The Animation Builder widget supports all [Default Properties](/ui-building-blocks/widgets/default-properties.md).

### Use Cases

Use **Animation Builder** when you want:

* **Scroll-based animations**
  * Animate elements as the user scrolls (fade in/out, parallax, scale changes).
* **Page-based animations**
  * Animate transitions between pages in a PageView.
* **Interactive animations**
  * Tie animations to **scroll position** or **page index** by using PageController or ScrollController values.
* **Chained / complex animations**
  * Create coordinated effects across multiple widgets based on scroll or page changes.


---

# Agent Instructions: 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://docs.digia.tech/ui-building-blocks/widgets/media-async-widgets/animation-builder.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.