---
title: Animation
description: Animation protocol schemas
---

{/* ⚠️  AUTO-GENERATED — DO NOT EDIT. Run build-docs.ts to regenerate. Hand-written docs go in content/docs/guides/. */}

Transition Preset Schema

Common animation transition presets.

<Callout type="info">
**Source:** `packages/spec/src/ui/animation.zod.ts`
</Callout>

## TypeScript Usage

```typescript
import { AnimationTrigger, ComponentAnimation, EasingFunction, MotionConfig, PageTransition, TransitionConfig, TransitionPreset } from '@objectstack/spec/ui';
import type { AnimationTrigger, ComponentAnimation, EasingFunction, MotionConfig, PageTransition, TransitionConfig, TransitionPreset } from '@objectstack/spec/ui';

// Validate data
const result = AnimationTrigger.parse(data);
```

---

## AnimationTrigger

Event that triggers the animation

### Allowed Values

* `on_mount`
* `on_unmount`
* `on_hover`
* `on_focus`
* `on_click`
* `on_scroll`
* `on_visible`


---

## ComponentAnimation

Component-level animation configuration

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **label** | `string` | optional | Descriptive label for this animation configuration |
| **enter** | `Object` | optional | Enter/mount animation |
| **exit** | `Object` | optional | Exit/unmount animation |
| **hover** | `Object` | optional | Hover state animation |
| **trigger** | `Enum<'on_mount' \| 'on_unmount' \| 'on_hover' \| 'on_focus' \| 'on_click' \| 'on_scroll' \| 'on_visible'>` | optional | When to trigger the animation |
| **reducedMotion** | `Enum<'respect' \| 'disable' \| 'alternative'>` | ✅ | Accessibility: how to handle prefers-reduced-motion |
| **ariaLabel** | `string` | optional | Accessible label for screen readers (WAI-ARIA aria-label) |
| **ariaDescribedBy** | `string` | optional | ID of element providing additional description (WAI-ARIA aria-describedby) |
| **role** | `string` | optional | WAI-ARIA role attribute (e.g., "dialog", "navigation", "alert") |


---

## EasingFunction

Animation easing function

### Allowed Values

* `linear`
* `ease`
* `ease_in`
* `ease_out`
* `ease_in_out`
* `spring`


---

## MotionConfig

Top-level motion and animation design configuration

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **label** | `string` | optional | Descriptive label for the motion configuration |
| **defaultTransition** | `Object` | optional | Default transition applied to all animations |
| **pageTransitions** | `Object` | optional | Page navigation transition settings |
| **componentAnimations** | `Record<string, Object>` | optional | Component name to animation configuration mapping |
| **reducedMotion** | `boolean` | ✅ | When true, respect prefers-reduced-motion and suppress animations globally |
| **enabled** | `boolean` | ✅ | Enable or disable all animations globally |


---

## PageTransition

Page-level transition configuration

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **type** | `Enum<'fade' \| 'slide_up' \| 'slide_down' \| 'slide_left' \| 'slide_right' \| 'scale' \| 'rotate' \| 'flip' \| 'none'>` | ✅ | Page transition type |
| **duration** | `number` | ✅ | Transition duration in milliseconds |
| **easing** | `Enum<'linear' \| 'ease' \| 'ease_in' \| 'ease_out' \| 'ease_in_out' \| 'spring'>` | ✅ | Easing function for the transition |
| **crossFade** | `boolean` | ✅ | Whether to cross-fade between pages |


---

## TransitionConfig

Animation transition configuration

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **preset** | `Enum<'fade' \| 'slide_up' \| 'slide_down' \| 'slide_left' \| 'slide_right' \| 'scale' \| 'rotate' \| 'flip' \| 'none'>` | optional | Transition preset to apply |
| **duration** | `number` | optional | Transition duration in milliseconds |
| **easing** | `Enum<'linear' \| 'ease' \| 'ease_in' \| 'ease_out' \| 'ease_in_out' \| 'spring'>` | optional | Easing function for the transition |
| **delay** | `number` | optional | Delay before transition starts in milliseconds |
| **customKeyframes** | `string` | optional | CSS @keyframes name for custom animations |
| **themeToken** | `string` | optional | Reference to a theme animation token (e.g. "animation.duration.fast") |


---

## TransitionPreset

Transition preset type

### Allowed Values

* `fade`
* `slide_up`
* `slide_down`
* `slide_left`
* `slide_right`
* `scale`
* `rotate`
* `flip`
* `none`


---

