Designful Launch editor

Script Live Demo

All Tags /AnimationScriptState MachineRuntime

Overview

This page points to a full docs live demo focused on script capability simulation:

  • pre-seeded scene with multiple objects and multiple timelines
  • one state machine with boolean, number, and trigger inputs
  • one bound script with typed script inputs (boolean, number, trigger, string)
  • a validated command dispatcher reused by both UI controls and external API calls
  • runtime diagnostics/log panel for both command execution and script hook execution

For script API/hook details, see /help/animation/script-overview.

Validation Contract

The demo dispatches commands through the shared @designful/animation-manager script command path.

  • supported command kinds: set-input, fire-trigger, set-object-property, seek-timeline, play-state-machine
  • all numeric payloads must be finite numbers (NaN/Infinity are rejected)
  • set-object-property validates value type by animation property:
    • visible -> boolean
    • numeric animation properties -> number
    • style.fill/style.stroke -> RGBA object
  • script trigger input pulses are deterministic (true -> false)

Open Live Demo

Verification Checklist

  1. Open /help/animation/script-live-demo-app and confirm machine state starts at idle.
  2. Click Run Script Chain (UI Path).
  3. Confirm machine state reaches armed during the chain before final completion.
  4. Confirm final machine state is active and diagnostics/log entries are updated.
  5. Click Reset Demo Scene.
  6. Run the same chain through API path button and verify the final state/diagnostics match the UI path.

API Bridge

The demo exposes window.__animationScriptDemo in browser runtime:

  • resetScene()
  • runScriptChain()
  • dispatchCommand(rawCommand)
  • getSnapshot()

All command executions still pass through the same validated dispatch path used by both UI and API triggers.