Animation

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.

pz.Animation · Category: Content · Full reference →

Preview

Code

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)

New

This component was added recently. Tell us how it works for you in the issue tracker.

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

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 and Events of every component.

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

@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 →

pz.stagger

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 →

pz.presence

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 →

pz.define_animation

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

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

Full reference →

pz.set_reduced_motion

set_reduced_motion(on=True)

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

Full reference →

Related

EffectsGlow, bloom, glass and opacity as style properties.

CardA bordered surface with an optional title and actions.

ToastNotifications stacked in the bottom-right corner.