> ## Documentation Index
> Fetch the complete documentation index at: https://docs.qomicex.top/llms.txt
> Use this file to discover all available pages before exploring further.

# Animations

## Animations

Like `Effects`, animations are a property element on visual nodes and apply only to that node.

```xml theme={null}
<Button.Animations>
  <FadeIn Duration="180" Delay="0" Easing="EaseOut" Trigger="Loaded" />
  <ScaleTo Duration="120" From="0.96" To="1" Trigger="Hover" />
  <Pulse Duration="600" Repeat="Infinite" Trigger="Click" />
</Button.Animations>
```

## Animation types

| Element | Main attributes | Description |
| :- | :- | :- |
| `FadeIn` | `From` / `To` | Fade in |
| `SlideIn` | `Direction` / `Distance` | Slide in from a direction |
| `ScaleTo` | `From` / `To` | Scale to a target |
| `RotateTo` | `From` / `To` | Rotate to a target angle |
| `Pulse` | — | Pulsing scale |
| `Spin` | — | Continuous rotation |

## Common attributes

* `Duration`: milliseconds, default `300`
* `Delay`: milliseconds, default `0`
* `Easing`: `Linear` / `Ease` / `EaseIn` / `EaseOut` / `EaseInOut`
* `Repeat`: number or `Infinite`
* `Trigger`: `Loaded` / `Hover` / `Click`

`SlideIn` uses `Direction` (`Left` / `Right` / `Top` / `Bottom`) and `Distance` (default `8`).

## Default animation takeover

* Declaring `Animations` takes over only that node's default transition; other nodes keep the launcher defaults
* Declaring `Effects` takes over only the Effect and leaves default animations alone
* Both can be declared together

```xml theme={null}
<Button Text="Emphasized">
  <Button.Effects>
    <ShadowEffect Radius="8" Color="Black" />
  </Button.Effects>
  <Button.Animations>
    <FadeIn Duration="180" Trigger="Loaded" />
  </Button.Animations>
</Button>
```

## Triggers

* `Loaded`: play after mount
* `Hover`: play on pointer enter
* `Click`: play while pressed (CSS `:active`)

Animations are visual only and do not change layout size. Use `Size`, `When`, or rerender for layout changes.

## Limits

* Animations do not trigger data loading or actions; use `Trigger` for event logic
* `Click` currently plays on the pressed state, not a full click state machine
* `transform` animations and transform effects can override each other; use one transform style per node


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.