Animation System

Yugma includes a keyframe-based animation system accessible via the Timeline panel at the bottom of the editor.

Timeline Panel

The Timeline sits at the bottom of the viewport and provides:

• Play/Pause controls
• Keyframe track per object — visual diamond markers for each keyframe
• Playhead — Draggable time cursor showing current frame
• FPS control — Adjustable frames per second (default: 24)

Working with Keyframes

Adding Keyframes

1. Select an object
2. Move the playhead to the desired frame
3. Modify the object's transform (position, rotation, scale)
4. A keyframe is automatically recorded at that frame

Playback

Press the Play button or use the timeline controls to preview the animation. Objects interpolate between keyframes using linear interpolation.

Animation Data

Keyframes are stored per-object in the scene state:

{
  "keyframes": {
    "0": {
      "position": [0, 0, 0],
      "rotation": [0, 0, 0],
      "scale": [1, 1, 1]
    },
    "24": {
      "position": [2, 0, 0],
      "rotation": [0, 1.57, 0],
      "scale": [1, 1, 1]
    }
  }
}

Current Limitations

• Transform properties only (position, rotation, scale)
• Linear interpolation between keyframes (no easing curves yet)
• No material property animation (planned)
• No skeletal/bone animation for imported models (planned)