Skip to content

animation.mdx

Latest commit

 

History

History
152 lines (101 loc) · 4.43 KB

animation.mdx

File metadata and controls

152 lines (101 loc) · 4.43 KB
Raw
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.

**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 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