React Architecture Concept • Core Motion Model
Animation Timeline Editor: Choreography & Visual Keyframing
Updated November 2026
The Animation Timeline Editor in ExodeUI provides precise visual control over multi-element choreography. While individual components resolve their settling motion through spring physics, the timeline editor orchestrates the sequential rhythm, stagger intervals, and entrance cascades of the overall interface.
The timeline sets the order and timing of each element, while springs handle the settling motion, so staged animations can still respond to interruptions.
Runnable ExodeUI React Implementation
Production ReadyMount the ExodeUICanvas component and bind parameters declaratively without imperative lifecycle hooks:
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function StaggeredList({ items }) {
return (
<ExodeUICanvas
src="/list_entrance.bexode"
inputs={{ items }}
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}Frequently Asked Questions about animation timeline editor
Can I export timeline sequences to GSAP or CSS?
Not as the main workflow. Timelines play through the ExodeUI runtime. The MCP server has an export_react_code tool that can produce React boilerplate, but there is no documented GSAP export.
When should I use a timeline instead of a spring?
Use a timeline when order and exact timing matter, such as a staged entrance. Use a spring for motion that responds to touch.
Can I stagger elements on a timeline?
Yes. Offset each element in time so that they enter in sequence.
Does a timeline replace a state machine?
No. A timeline describes motion over time, and a state machine decides when each animation plays.