Animation

Transition Preset Schema

Common animation transition presets.

Source: packages/spec/src/ui/animation.zod.ts

TypeScript Usage

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 \| Object`	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 \| Object`	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 \| Object`	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

On this page