# 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](https://docs.digia.tech/ui-building-blocks/widgets/default-properties "mention").

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