# Where to Find Animation Timing Constants in OpenMAIC's Action Engine

> Discover where OpenMAIC's Action Engine stores animation timing constants. Find all animation timing constants in configs/animation.ts for default durations and triggers.

- Repository: [MAIC/OpenMAIC](https://github.com/THU-MAIC/OpenMAIC)
- Tags: api-reference
- Published: 2026-09-03

---

**OpenMAIC defines all animation timing constants in the [`configs/animation.ts`](https://github.com/THU-MAIC/OpenMAIC/blob/main/configs/animation.ts) module, which serves as the central registry for default durations, triggers, and CSS class prefixes used throughout the Action Engine.**

The OpenMAIC platform (THU-MAIC/OpenMAIC) relies on a dedicated configuration layer to standardize motion design across its workbench interface. The Action Engine references these values to ensure consistent animation behavior when executing workspace actions or rendering UI transitions.

## Core Timing Constants in configs/animation.ts

The [`configs/animation.ts`](https://github.com/THU-MAIC/OpenMAIC/blob/main/configs/animation.ts) file exports three fundamental constants that establish the baseline timing behavior for all animations in the system:

- **ANIMATION_DEFAULT_DURATION** — Set to `1000` milliseconds, this constant provides the fallback duration when an animation definition omits a specific length. The Action Engine imports this value to initialize animation libraries like GSAP or animate.css when no override is specified.

- **ANIMATION_DEFAULT_TRIGGER** — Defined as `'click'`, this string determines the default DOM event that initiates an animation sequence. The Action Engine uses this as the standard interaction model unless a component explicitly declares an alternative trigger such as `'hover'` or `'scroll'`.

- **ANIMATION_CLASS_PREFIX** — Set to `'animate__'`, this prefix conforms to the animate.css naming convention. The Action Engine prepends this string to animation names (e.g., converting `fadeIn` to `animate__fadeIn`) when generating CSS class strings for components.

## Animation Catalog Dictionaries

Beyond timing parameters, [`configs/animation.ts`](https://github.com/THU-MAIC/OpenMAIC/blob/main/configs/animation.ts) houses complete animation dictionaries that map human-readable names to CSS classes:

- **ENTER_ANIMATIONS** — Entry effects like "弹入" (bounceIn)
- **EXIT_ANIMATIONS** — Exit effects for component removal  
- **ATTENTION_ANIMATIONS** — Emphasis effects for user notifications

These catalogs allow the Action Engine to resolve descriptive animation names from workspace configurations into actual CSS classes using the `ANIMATION_CLASS_PREFIX` convention.

## How the Action Engine Consumes These Constants

According to the OpenMAIC source code, the Action Engine imports timing constants at two critical integration points:

**Workspace Action Construction**  
In [`lib/workbench/workspace-actions.ts`](https://github.com/THU-MAIC/OpenMAIC/blob/main/lib/workbench/workspace-actions.ts), the Action Engine imports `ANIMATION_DEFAULT_DURATION` and `ANIMATION_DEFAULT_TRIGGER` to construct action payloads. When a user creates a new workspace action without specifying timing, the engine falls back to these imported defaults to configure the animation runtime.

**Component-Level Application**  
In [`components/workbench/workspace/WorkspaceShell.tsx`](https://github.com/THU-MAIC/OpenMAIC/blob/main/components/workbench/workspace/WorkspaceShell.tsx), UI components consume `ANIMATION_CLASS_PREFIX` to build valid CSS class strings. The shell component combines this prefix with animation names selected from the `ENTER_ANIMATIONS` catalog to apply scoped styles to workspace elements.

## Practical Implementation Examples

The following patterns demonstrate how to import and apply these constants in OpenMAIC-based projects:

```typescript
// Importing core timing constants
import {
  ANIMATION_DEFAULT_DURATION,
  ANIMATION_CLASS_PREFIX,
  ANIMATION_DEFAULT_TRIGGER,
} from '@/configs/animation';

// Building a standardized animation class
const animationClass = `${ANIMATION_CLASS_PREFIX}fadeIn`;

// Applying default duration to a config override
function getAnimationDuration(customMs?: number): number {
  return customMs ?? ANIMATION_DEFAULT_DURATION; // Returns 1000 if undefined
}

```

In React components, combine these constants to ensure consistency with the Action Engine's baseline:

```tsx
import {
  ANIMATION_DEFAULT_DURATION,
  ANIMATION_CLASS_PREFIX,
} from '@/configs/animation';

export function AnimatedPanel() {
  const animationClass = `${ANIMATION_CLASS_PREFIX}bounceIn`;
  
  return (
    <div
      className={animationClass}
      style={{ animationDuration: `${ANIMATION_DEFAULT_DURATION}ms` }}
      data-trigger={ANIMATION_DEFAULT_TRIGGER}
    >
      Content synchronized with Action Engine defaults
    </div>
  );
}

```

## Summary

- **Animation timing constants** for OpenMAIC's Action Engine reside exclusively in [`configs/animation.ts`](https://github.com/THU-MAIC/OpenMAIC/blob/main/configs/animation.ts)
- **ANIMATION_DEFAULT_DURATION** (`1000` ms) provides the fallback timing for all undefined animation lengths
- **ANIMATION_CLASS_PREFIX** (`'animate__'`) ensures CSS class compatibility with the animate.css library
- The Action Engine consumes these values in [`lib/workbench/workspace-actions.ts`](https://github.com/THU-MAIC/OpenMAIC/blob/main/lib/workbench/workspace-actions.ts) during action construction
- UI components reference the same file to maintain timing parity in [`components/workbench/workspace/WorkspaceShell.tsx`](https://github.com/THU-MAIC/OpenMAIC/blob/main/components/workbench/workspace/WorkspaceShell.tsx)

## Frequently Asked Questions

### How do I override the default animation duration for a specific workspace action?

Import `ANIMATION_DEFAULT_DURATION` from [`configs/animation.ts`](https://github.com/THU-MAIC/OpenMAIC/blob/main/configs/animation.ts) and use a nullish coalescing operator to prioritize custom values. Pass your override in milliseconds to the animation configuration object, and the Action Engine will apply your specific duration instead of the default 1000 ms.

### What CSS library convention does OpenMAIC use for animation classes?

OpenMAIC follows the animate.css naming convention through the `ANIMATION_CLASS_PREFIX` constant, which prefixes all animation classes with `'animate__'`. When the Action Engine processes animation names from the `ENTER_ANIMATIONS` or `EXIT_ANIMATIONS` dictionaries, it automatically prepends this prefix to generate valid class strings like `animate__fadeIn` or `animate__bounceOut`.

### Where does the Action Engine trigger animations from by default?

The default trigger event is defined by `ANIMATION_DEFAULT_TRIGGER` in [`configs/animation.ts`](https://github.com/THU-MAIC/OpenMAIC/blob/main/configs/animation.ts), which is set to `'click'`. When a workspace action configuration omits a trigger specification, the Action Engine imports this constant to bind animations to click events on target elements.

### Can I access the list of available animation names programmatically?

Yes, the [`configs/animation.ts`](https://github.com/THU-MAIC/OpenMAIC/blob/main/configs/animation.ts) module exports `ENTER_ANIMATIONS`, `EXIT_ANIMATIONS`, and `ATTENTION_ANIMATIONS` dictionaries. These objects map human-readable labels (including Chinese descriptors) to CSS class names, allowing you to programmatically list available animations or validate user selections against the supported catalog.