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

OpenMAIC defines all animation timing constants in the 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 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 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, 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, 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:

// 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:

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
• 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 during action construction
• UI components reference the same file to maintain timing parity in 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 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, 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}