EXODEUI EDITOR MANUAL
Motion & Timeline Studio
Multi-track timelines, cubic Bézier easing curves, physics-driven spring dynamics, and vector path constraints.
Interactive Easing & Timeline Scrubber
Timeline & Playback
Navigate frames, scrub playheads, set frame rates, and define work areas.
Work Area & Looping
Drag the bracket handles on the timeline ruler to isolate a specific segment of your animation. Playback will cycle strictly within these markers.
Choose between standard wrap-around looping, one-shot trigger execution, or bi-directional ping-pong oscillation.
Property Keyframing
Animate transforms, paths, colors, and mesh deformations over time.
Position, Rotation & Scale
Click the Diamond icon next to any property in the Inspector to plant a keyframe at the current playhead position.
| Property | Shortcut | Interpolation |
|---|---|---|
| Position (X, Y, Z) | Alt + P | Linear, Cubic Bézier, or Spring |
| Rotation (Angle) | Alt + R | Shortest arc or continuous revolution |
| Scale (Width, Height) | Alt + S | Uniform or independent axis stretch |
| Opacity & Alpha | Alt + T | 0.00 to 1.00 linear fade |
Auto-Keyframing Mode
Toggle the Auto-Key (Record) button in the timeline toolbar. While active, any transformation or style tweak made on the canvas automatically generates keyframes on the active tracks without manual diamond insertion.
Graph Editor & Custom Easing
Sculpt velocity curves and custom Bézier tangents with mathematical precision.
Bézier Tangents & Curves
Press Shift + E to open the Graph Editor. Each keyframe exposes cubic Bézier control handles:
Visualizes rate of change (pixels/sec). High peaks indicate lightning-fast acceleration; flat valleys indicate gentle coasting.
Visualizes absolute property values over time. Perfect for adjusting exact landing positions and overshoot curves.
Standard Easing Presets
| Curve Name | Mathematical Formula | Recommended Feel |
|---|---|---|
| Ease Out Quad | cubic-bezier(0.25, 0.46, 0.45, 0.94) | Gentle settling for cards & modals |
| Ease Out Back | cubic-bezier(0.34, 1.56, 0.64, 1) | Playful overshoot for buttons & icons |
| Ease In Out Cubic | cubic-bezier(0.65, 0, 0.35, 1) | Smooth bi-directional navigation transitions |
| Linear | linear | Continuous rotations, tickers, background orbits |
Spring Dynamics & Physics
Physically accurate mass-spring-damper simulations without manual keyframing.
Stiffness, Damping & Mass
Instead of manual cubic curves, set an animation track to Spring Mode for dynamic real-time physics:
| Parameter | Typical Range | Physical Behavior |
|---|---|---|
| Stiffness | 50 - 500 | Higher values create snappy, rapid response |
| Damping | 10 - 50 | Controls how quickly oscillation settles to rest |
| Mass | 0.5 - 5.0 | Inertia of the object; heavier objects overshoot further |
Vector Path Animation
Constrain objects to travel seamlessly along arbitrary Bézier curves.
Path Constraints & Offset
- Draw a path using the Pen Tool [P].
- Select your animated object and add a Path Constraint in the Inspector.
- Target your drawn vector path.
- Animate the Offset (0% → 100%) property across your timeline.
- Enable Orient to Tangent so the object auto-rotates to match the curvature.
Timeline Shortcuts
Speed through your motion production workflow.