Timeline

Animation timeline for controlling time-based sequences, keyframes, and playback

🚧

Under Construction

This documentation is currently being developed and will be available soon.

Overview

The Timeline panel is an animation timeline located at the bottom of the main viewport area (default height 150px, resizable). It provides comprehensive tools for creating and managing keyframe animations, controlling playback, and visualizing time-based sequences with multi-track support and real-time preview.

Playback Controls

Transport Bar

  • • Play/Pause: Toggle animation playback
  • • Stop: Return to start
  • • Previous Frame: Step backward
  • • Next Frame: Step forward
  • • Loop: Toggle loop mode
  • • Speed: Playback rate multiplier

Time Display

  • • Current Time: Active frame/second
  • • Duration: Total timeline length
  • • Format: Frames or timecode (HH:MM:SS:FF)

Timeline Track

Time Ruler

  • • Scale: Zoom in/out on timeline
  • • Markers: Frame numbers or time values
  • • Scrubber: Current time indicator (red line)
  • • Click to Seek: Jump to specific time

Keyframe Display

  • • Diamonds: Keyframe markers (◆)
  • • Colors: Different colors per property
  • • Selection: Click to select keyframes
  • • Multi-select: Ctrl+click or drag box

Track Layers

Object Tracks

  • • Per-Object: Each object has its own track
  • • Expandable: Show property sub-tracks
  • • Visibility: Toggle track visibility
  • • Lock: Prevent editing

Property Tracks

  • • Transform: Position, rotation, scale
  • • Material: Color, opacity, etc.
  • • Custom: Any animatable property

Keyframe Editing

Add Keyframes

  • • Auto-key: Record changes automatically
  • • Manual: Click "Add Keyframe" button
  • • Right-click: Insert at cursor position

Edit Keyframes

  • • Drag: Move keyframes in time
  • • Copy/Paste: Duplicate keyframes
  • • Delete: Remove selected keyframes
  • • Adjust Values: Edit in Properties panel

Interpolation

Linear
Straight interpolation
Bezier
Smooth curves
Step
Instant changes
Custom Curves
Edit tangents

Animation Tools

Curve Editor

  • • Graph View: Visual curve editing
  • • Handles: Adjust curve tangents
  • • Presets: Ease in/out templates

Dope Sheet

  • • Summary View: All keyframes at once
  • • Box Selection: Select multiple keys
  • • Scale Selection: Stretch/compress timing

Integration

With Viewport

  • • Real-time preview during playback
  • • Update objects on scrub
  • • Sync selection state

With Properties Panel

  • • Set keyframes from property changes
  • • Display animated properties
  • • Show interpolated values

With Node Editor

  • • Animation nodes support
  • • Timeline parameter nodes
  • • Procedural animation

WebSocket Sync

  • • Synchronized playback
  • • Shared timeline state
  • • Collaborative editing

Performance

Optimization

  • • Frame Skipping: Maintain target FPS
  • • LOD Playback: Reduced quality preview
  • • Cached Interpolation: Pre-compute curves
  • • Viewport Updates: Batch render calls

Large Animations

  • • Streaming: Load on demand
  • • Compression: Optimize keyframe data
  • • Decimation: Reduce keyframe density

Keyboard Shortcuts

SpacePlay/Pause
HomeGo to start
EndGo to end
← →Previous/Next frame
Shift + ← →Jump 10 frames
KAdd keyframe
DeleteDelete selected keys
Ctrl + C/VCopy/Paste keys

Export/Import

Formats

  • • JSON: Native format
  • • FBX: With animations
  • • GLTF: Animation support
  • • Video: Render to MP4

Options

  • • Frame Range: Export subset
  • • Sampling Rate: Keyframe density
  • • Compression: Lossy/lossless

Best Practices

1.
Keyframe Spacing: Avoid too many keyframes to maintain performance
2.
Easing: Use appropriate interpolation for smooth animations
3.
Organization: Group related animations using tracks
4.
Performance: Preview at lower quality for complex scenes
5.
Backup: Save animation data separately for version control