# Animation

> Presets, keyframes and transitions for any widget. A native Pyzed component for Python desktop GUIs, with a live preview, code examples and its API.

Source: https://albakore.github.io/pyzed/library/animation/

:::tip[In plain words]
Makes things move: fade in, slide, bounce or glow, without extra work.
:::

Every widget has `animate()` and `transition()`. `animate` plays one of 47 presets or a `pz.Animation` when the widget appears, on hover, press, focus, click or while `active`; `transition` animates property changes like CSS. `pz.stagger` cascades a list in and `pz.presence` animates content in and out when it changes. Everything runs natively, without calling Python per frame. See the [Animation guide](https://albakore.github.io/pyzed/animation/).

`pz.Animation` · Category: [Content](https://albakore.github.io/pyzed/library/#content) · [Full reference →](https://albakore.github.io/pyzed/reference/widgets/#animation-1)

**Code:**

```python
pz.column(pz.stagger([
    ui.card(ui.label(name), width=320).animate("lift", on="hover")
    for name in ("fade_in_up", "lift on hover", "stagger")
], "fade_in_up", step=60), spacing=10)
```

:::note[New]
This component was added recently. Tell us how it works for you in the [issue tracker](https://github.com/albakore/pyzed/issues).
:::

## When to use

- To show that something appeared, changed or needs attention: a toast, a new row, an error shake.
- For hover and press feedback on cards and custom buttons.
- For page and tab transitions with `pz.presence`.

## Usage

```python
import pyzed as pz
from pyzed import ui

class Inbox(pz.App):
    errors = 0
    page = 0

    def view(self):
        return pz.column([
            ui.input(self.query, self.search).animate("shake", key=self.errors),
            pz.presence(self.page_view(), key=self.page, enter="fade_in_right", exit="fade_out"),
            ui.button("Record", self.record).animate("glow_pulse", active=self.recording),
        ], spacing=12)
```

## Events

Animation has no events of its own: it shows what you give it. Like every widget it also has the **18 common events** (`click`, `double_click`, `right_click`, `mouse_enter`, `drag`, `key_down`, `resize`…), attached with `.on(...)`: see [Events](https://albakore.github.io/pyzed/guides/events/) and [Events of every component](https://albakore.github.io/pyzed/library/events/).

## Tips

:::tip
Screenshots and `pz.set_reduced_motion(True)` show every animation at rest, so tests are stable. Respect users who turn motion off.
:::

## Properties and API

### `pz.Animation`

```python
@dataclass
class Animation(keyframes=(), duration=300, delay=0, easing='ease', repeat=1, direction='normal', fill='both', on='mount', category='custom', description='', _frames=())
```

A keyframe animation, like a CSS `@keyframes` rule with its timing.

[Full reference →](https://albakore.github.io/pyzed/reference/widgets/#animation-1)

### `pz.stagger`

```python
stagger(items, animation='fade_in_up', *, step=40, delay=0, **options)
```

`items` with the same animation, each starting `step` milliseconds after the previous one (a list that cascades in)::

[Full reference →](https://albakore.github.io/pyzed/reference/widgets/#stagger)

### `pz.presence`

```python
presence(
    content,
    key,
    *,
    enter='fade_in',
    exit='fade_out',
    id=None,
    duration=None,
    easing=None,
)
```

Shows `content` and, when `key` changes, animates the old content out (`exit`) while the new one comes in (`enter`), like page transitions::

[Full reference →](https://albakore.github.io/pyzed/reference/widgets/#presence)

### `pz.define_animation`

```python
define_animation(name, animation=None, **options)
```

Names an animation so `animate(name)` plays it; returns it.

[Full reference →](https://albakore.github.io/pyzed/reference/widgets/#define_animation)

### `pz.set_reduced_motion`

```python
set_reduced_motion(on=True)
```

Turns motion off (`True`) or back on: animations show their resting state at once.

[Full reference →](https://albakore.github.io/pyzed/reference/widgets/#set_reduced_motion)

## Related

- [Effects](https://albakore.github.io/pyzed/library/effects/): Glow, bloom, glass and opacity as style properties.
- [Card](https://albakore.github.io/pyzed/library/card/): A bordered surface with an optional title and actions.
- [Toast](https://albakore.github.io/pyzed/library/toast/): Notifications stacked in the bottom-right corner.