Timeline - Complete Guide
Timeline - Complete Guide
Master the Timeline panel in Scribe Animator for precise animation control. This guide covers playback controls, keyframes, zoom, tracks, and timing for professional animations.
Application Layout Overview
┌─────────────────────────────────────────────────────────────────────────────┐
│ HEADER BAR │
│ [File] [Edit] [View] [Export] [Share] [?] │
├────────────┬───────────────────────────────────────────────────────────────┬┤
│ │ │ │
│ LEFT │ CANVAS AREA │ │
│ SIDEBAR │ │ │
│ │ ┌─────────────────────────────────┐ │ │
│ ┌────────┐ │ │ │ │ │
│ │ Assets │ │ │ Your Animation Canvas │ │ │
│ ├────────┤ │ │ │ │ │
│ │ Images │ │ └─────────────────────────────────┘ │ │
│ ├────────┤ │ │ │
│ │ Scenes │ │ │ │
│ └────────┘ │ │ │
│ │ │ │
├────────────┴───────────────────────────────────────────────────────────────┴┤
│ TIMELINE PANEL │
│ ┌─────────────────────────────────────────────────────────────────────────┐│
│ │ [▶][⏹][🔁] 1× │ 🔎 Search │ [−][⊙][+] │ [⇲] Dock │ ││
│ ├─────────────────────────────────────────────────────────────────────────┤│
│ │ Time: 0s 5s 10s 15s 20s 25s 30s ││
│ │ │ │ │ │ │ │ │ ││
│ │ ▼ Playhead ││
│ ├────────┬────────────────────────────────────────────────────────────────┤│
│ │ Track │ ◆────────◆─────────────◆──────◆ ││
│ │ Object │ keyframe keyframe keyframe ││
│ ├────────┼────────────────────────────────────────────────────────────────┤│
│ │ Track │ ◆──────────────────◆───────────────◆ ││
│ │ Prop │ ││
│ └────────┴────────────────────────────────────────────────────────────────┘│
│ Audio: ████████████████████████████████████████████████ │
│ [▶ Play] ════════════●════════════════════════════════ [00:05 / 00:30] │
└─────────────────────────────────────────────────────────────────────────────┘
Timeline Location:
- Bottom of screen — Default docked position
- Right panel — Alternative dock position
- Floating window — Detached mode
Timeline Components
Component Overview
Timeline Anatomy:
─────────────────────────────────────────────────
┌─────────────────────────────────────────────────────────────────────────────┐
│ TRANSPORT BAR │
│ ┌───────────────────────────────────────────────────────────────────────┐ │
│ │ [▶][⏹][🔁] [1×▼] │ 🔎 Search... │ [−][⊙][+] [Fit] │ [⇲ Dock] │ │
│ └───────────────────────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────────────────────┤
│ TIME RULER │
│ │ 0s │ 5s │ 10s │ 15s │ 20s │ 25s │ │
│ │ │ │ │ │ │ │ │
│ │ ▼ Playhead │
├─────────────────────────────────────────────────────────────────────────────┤
│ TRACK LIST │
│ ┌────────┬──────────────────────────────────────────────────────────────┐ │
│ │ Meta │ Track Lane (keyframes, clips, animations) │ │
│ │ ───────┼──────────────────────────────────────────────────────────────│ │
│ │ 📝 Text│ ◆───────────◆──────────────◆ │ │
│ │ │ │ │
│ │ 🖼️ Img │ ◆─────────────────────────────◆ │ │
│ │ │ │ │
│ │ ⭐ Icon│ ◆─────◆ │ │
│ └────────┴──────────────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────────────────────┤
│ AUDIO LANE (toggleable) │
│ ┌───────────────────────────────────────────────────────────────────────┐ │
│ │ 🎵 │ ▄▄▄▄█▄█▄▄▄▄█▄▄▄▄▄▄█▄▄▄▄▄▄█▄▄▄▄▄▄▄█▄▄▄▄▄▄▄█▄▄▄▄▄ │ │
│ └───────────────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────┘
| Component | Description |
|---|
| Transport Bar | Playback controls, search, zoom |
| Time Ruler | Time scale with tick marks |
| Playhead | Current time indicator |
| Track List | Object and property tracks |
| Track Meta | Track names and controls |
| Track Lane | Keyframes and animation bars |
| Audio Lane | Audio waveform (toggleable) |
Transport Bar Controls
Playback Controls
Playback Section:
─────────────────────────────────────────────────
┌─────────────────────────────────────────────────────────────┐
│ [▶] [⏹] [🔁] [1× ▼] │
│ │ │ │ │ │
│ │ │ │ └── Playback Speed │
│ │ │ └── Loop Toggle │
│ │ └── Stop (return to start) │
│ └── Play/Pause │
└─────────────────────────────────────────────────────────────┘
| Control | Icon | Function |
|---|
| Play/Pause | ▶ / ⏸ | Start or pause playback |
| Stop | ⏹ | Stop and return to start |
| Loop | 🔁 | Toggle loop playback |
| Speed | 1× | Change playback rate |
Playback Speeds
| Speed | Use Case |
|---|
| 0.25× | Slow motion review |
| 0.5× | Detail inspection |
| 1× | Normal speed (default) |
| 1.5× | Quick preview |
| 2× | Fast preview |
| 4× | Rapid scrub |
Use 0.5× speed to check animation timing details, and 2× speed to quickly preview long animations.
Zoom Controls
Zoom Interface
Zoom Section:
─────────────────────────────────────────────────
┌─────────────────────────────────────────────────────────────┐
│ [−] [⊙] [+] [Fit All] │
│ │ │ │ │ │
│ │ │ │ └── Fit entire timeline in view │
│ │ │ └── Zoom In │
│ │ └── Reset Zoom (100%) │
│ └── Zoom Out │
└─────────────────────────────────────────────────────────────┘
Zoom Levels
| Level | Display | Use Case |
|---|
| 0.25× (25%) | Entire project overview | Long animations |
| 1× (100%) | Default view | General editing |
| 4× (400%) | Fine detail | Precise keyframe placement |
| 64× (6400%) | Maximum zoom | Frame-by-frame editing |
Zoom Range
Zoom Scale:
─────────────────────────────────────────────────
Min Default Max
│ │ │
▼ ▼ ▼
0.25× ════════════════════ 1× ════════════════════ 64×
│ │ │
Overview Normal Frame-precise
Scroll wheel on the track area also zooms in/out. Hold Ctrl/⌘ while scrolling for faster zoom.
Time Ruler
The time ruler shows the timeline scale and current position.
Ruler Layout
Time Ruler:
─────────────────────────────────────────────────
0s 5s 10s 15s 20s 25s 30s
│ │ │ │ │ │ │
├───────┼───────┼───────┼───────┼───────┼───────┤
│ │ │ │ │ │ │ │ │ │ │ │ │
▼
Playhead (current time indicator)
Ruler Ticks
| Zoom Level | Major Ticks | Minor Ticks |
|---|
| Overview (0.25×) | 10 seconds | 5 seconds |
| Normal (1×) | 5 seconds | 1 second |
| Detailed (4×) | 1 second | 0.5 seconds |
| Frame-level (16×+) | 0.5 seconds | 0.1 seconds |
Clicking the Ruler
| Action | Effect |
|---|
| Click | Jump playhead to that time |
| Drag | Scrub through timeline |
| Double-click | Set in/out range (with Shift) |
Playhead
The playhead indicates the current time position.
Playhead Features
Playhead Indicator:
─────────────────────────────────────────────────
│
▼ ◄── Playhead handle (draggable)
─────┼─────────────────────────────────────
│
│ ◄── Playhead line (vertical)
│
│
─────┼─────────────────────────────────────
│
Playhead Operations
| Action | How To |
|---|
| Move playhead | Click on ruler or drag handle |
| Scrub | Drag playhead left/right |
| Jump to start | Press Home or click ⏹ |
| Jump to end | Press End |
| Step frame | Arrow keys (← →) |
Tracks
Tracks represent objects and their animatable properties.
Track Types
| Track Type | Icon | Description |
|---|
| Object Track | 📦 | Main track for scene objects |
| Property Track | ↳ | Sub-track for specific properties |
| Audio Track | 🎵 | Audio clips and waveforms |
Track Structure
Track Hierarchy:
─────────────────────────────────────────────────
┌─────────────────────────────────────────────────────────────┐
│ 📦 Text Object [👁] [🔒] [▼] │
│ ├─ ↳ Position X │
│ ├─ ↳ Position Y │
│ ├─ ↳ Opacity │
│ └─ ↳ Scale │
├─────────────────────────────────────────────────────────────┤
│ 📦 Image Object [👁] [🔒] [▼] │
│ ├─ ↳ Position X │
│ └─ ↳ Rotation │
└─────────────────────────────────────────────────────────────┘
| Control | Icon | Function |
|---|
| Visibility | 👁 | Show/hide object |
| Lock | 🔒 | Prevent editing |
| Collapse | ▼ | Expand/collapse property tracks |
Keyframes
Keyframes define animation values at specific times.
Keyframe Types
Keyframe Symbols:
─────────────────────────────────────────────────
◆ — Standard keyframe (value defined)
◇ — Empty keyframe (no change)
● — Selected keyframe
◆━━━━◆ — Animation span between keyframes
Adding Keyframes
| Method | How To |
|---|
| Auto-key | Change object property at playhead |
| Click track | Click at desired time position |
| Right-click menu | Insert Keyframe at Playhead |
| Keyboard | Press K at current time |
Keyframe Operations
Keyframe Context Menu:
─────────────────────────────────────────────────
┌─────────────────────────────────────────────────────────────┐
│ Right-click on keyframe: │
├─────────────────────────────────────────────────────────────┤
│ ✏️ Edit Value │
│ 📋 Copy Keyframe │
│ 📄 Paste Keyframe │
│ ➕ Duplicate Keyframe │
│ ───────────────────────────────── │
│ 🔀 Ease In │
│ 🔀 Ease Out │
│ 🔀 Ease In-Out │
│ ───────────────────────────────── │
│ 🗑️ Delete Keyframe │
└─────────────────────────────────────────────────────────────┘
Selecting Multiple Keyframes
Multi-Select Methods:
─────────────────────────────────────────────────
Method 1: Shift+Click
◆ ──── ● ──── ● ──── ● ──── ◆
└───────┬───────┘
Selected range
Method 2: Marquee Selection
┌─────────────────┐
│ ● ──── ● ──── ● │
└─────────────────┘
Drag to select area
Method 3: Select All in Track
Ctrl/⌘ + A (with track focused)
Animation Curves
Control how values change between keyframes.
Easing Types
| Easing | Icon | Effect |
|---|
| Linear | ── | Constant speed |
| Ease In | ╭─ | Starts slow, ends fast |
| Ease Out | ─╮ | Starts fast, ends slow |
| Ease In-Out | ╭╮ | Smooth start and end |
Curve Visualization
Easing Curves:
─────────────────────────────────────────────────
Linear: Ease In: Ease Out: Ease In-Out:
───────── ╭──── ────╮ ╭──╮
╱ ╱ ╲ ╱ ╲
╱ ╱ ╲ ╱ ╲
╱ ╱ ╲ ╱ ╲
─────────── ─ ───
Start fast Start slow Start fast Smooth both
constant accelerate decelerate ends
Opening Curve Editor
Timeline Drawers:
─────────────────────────────────────────────────
┌─────────────────────────────────────────────────────────────┐
│ Drawer Tabs: [Keyframes] [Curves] [Camera] [Draw] │
├─────────────────────────────────────────────────────────────┤
│ │
│ Curves Drawer: │
│ │
│ ▲ ╭──────╮ │
│ 100│ ╭──╯ ╰──╮ │
│ │ ╭──╯ ╰──╮ │
│ 50│ ╭──╯ ╰──╮ │
│ │ ╭──╯ ╰──╮ │
│ 0│──────────╭──╯ ╰───│
│ └──────────┴────────────────────────────────────────►│
│ 0s 5s 10s 15s 20s 25s │
│ │
└─────────────────────────────────────────────────────────────┘
Searching and Filtering
Find specific tracks and keyframes quickly.
Search Interface
Search Box:
─────────────────────────────────────────────────
┌─────────────────────────────────────────────────────────────┐
│ 🔎 │ text [×] │
│ │ │
│ └── Type object name, property, or track label │
└─────────────────────────────────────────────────────────────┘
Search Features
| Search For | Example |
|---|
| Object name | "Title" |
| Property type | "opacity" |
| Track type | "position" |
| Multiple terms | "text scale" |
Use search to quickly navigate to specific objects in projects with many tracks.
Docking Options
Position the Timeline panel where you prefer.
Dock Positions
| Position | Best For |
|---|
| Bottom (default) | Wide timeline view |
| Right | Vertical workflow |
| Floating | Multi-monitor setups |
Dock Toggle
Dock Button:
─────────────────────────────────────────────────
Bottom Dock: [⧄] ← Click to undock
Floating: [⧉] ← Click to dock
Right Dock: [⟷] ← Vertical orientation
Resizing
| Direction | How To |
|---|
| Height (bottom dock) | Drag top edge |
| Width (right dock) | Drag left edge |
| Both (floating) | Drag any edge or corner |
Size Limits
| Dimension | Minimum | Maximum |
|---|
| Height | 220 px | 720 px |
| Width | 280 px | 960 px |
Keyboard Shortcuts
Playback Shortcuts
| Shortcut | Action |
|---|
Space | Play/Pause |
Enter | Play from start |
Esc | Stop |
L | Toggle loop |
J | Decrease speed |
K | Reset speed (1×) |
Shift + L | Increase speed |
Navigation Shortcuts
| Shortcut | Action |
|---|
Home | Go to start |
End | Go to end |
← / → | Step backward/forward |
Shift + ←/→ | Jump to prev/next keyframe |
Page Up | Previous scene |
Page Down | Next scene |
Editing Shortcuts
| Shortcut | Action |
|---|
K | Add keyframe at playhead |
Delete | Delete selected keyframes |
Ctrl/⌘ + C | Copy keyframes |
Ctrl/⌘ + V | Paste at playhead |
Ctrl/⌘ + Shift + V | Paste in place |
Ctrl/⌘ + D | Duplicate selected |
Ctrl/⌘ + A | Select all in track |
Ctrl/⌘ + G | Group keyframes |
Zoom Shortcuts
| Shortcut | Action |
|---|
+ / = | Zoom in |
- | Zoom out |
0 | Reset zoom |
Ctrl/⌘ + 0 | Fit all |
Scroll wheel | Zoom at cursor |
Timeline Drawers
Advanced editing tools in collapsible drawers.
Available Drawers
| Drawer | Icon | Purpose |
|---|
| Keyframes | ◆ | Bulk keyframe editing |
| Curves | 📈 | Easing curve editor |
| Camera | 🎥 | Scene camera tracks |
| Draw | ✏️ | Draw animation settings |
Drawer Layout
Drawer Panel:
─────────────────────────────────────────────────
┌─────────────────────────────────────────────────────────────┐
│ [◆ Keyframes] [📈 Curves] [🎥 Camera] [✏️ Draw] │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Drawer Content Area │ │
│ │ │ │
│ │ (Keyframe list, curve graph, camera controls, │ │
│ │ or draw settings depending on selected tab) │ │
│ │ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ [Pop Out ⧉] [Close ×] │
└─────────────────────────────────────────────────────────────┘
Pop-Out Windows
Each drawer can be detached as a floating window:
- Click [Pop Out ⧉] in drawer
- Drawer becomes floating window
- Position anywhere on screen
- Click [Dock] to return
Audio Lane
View and edit audio clips synchronized with your animation.
Audio Lane Interface
Audio Lane:
─────────────────────────────────────────────────
┌────────────────────────────────────────────────────────────────┐
│ 🎵 │ ▄▄▄▄█▄█▄▄▄▄█▄▄▄▄▄▄█▄▄▄▄▄▄█▄▄▄▄▄▄▄█▄▄▄▄▄█▄▄▄▄█▄▄▄▄█▄▄▄▄ │
│ │ background-music.mp3 │
│ ├───────────────────────────────────────────────────────────┤
│ 🔊 │ ▓▓▓▓ ▓▓▓▓ ▓▓▓▓ │
│ │ whoosh click swoosh │
└────┴───────────────────────────────────────────────────────────┘
Toggling Audio Lane
Transport Bar:
─────────────────────────────────────────────────
[▶][⏹][🔁] [1×] │ ... │ [🎵 Toggle Audio]
│
└── Click to show/hide audio lane
Common Workflows
Workflow 1: Basic Animation
Step 1 Step 2 Step 3 Step 4
┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Position │ │ Change │ │ Move │ │ Change │
│ playhead at │ ───► │ object │ ───► │ playhead to │ ───► │ property │
│ start (0s) │ │ property │ │ end time │ │ again │
└──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘
│ │ │ │
└────────────────────┴────────────────────┴────────────────────┘
Keyframes auto-created at each change
Workflow 2: Precise Timing Adjustment
Step 1 Step 2 Step 3
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Zoom in to │ │ Select and │ │ Play to │
│ see detail │ ───► │ drag │ ───► │ verify │
│ (4× or more) │ │ keyframe │ │ timing │
└──────────────┘ └──────────────┘ └──────────────┘
Workflow 3: Copy Animation
Step 1 Step 2 Step 3
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Select │ │ Copy with │ │ Select new │
│ keyframes │ ───► │ Ctrl/⌘ + C │ ───► │ track and │
│ in track │ │ │ │ paste │
└──────────────┘ └──────────────┘ └──────────────┘
Troubleshooting
Playback Issues
| Issue | Cause | Solution |
|---|
| Playback stutters | Complex animation | Reduce object count or effects |
| Wrong speed | Speed not reset | Press K to reset to 1× |
| Doesn't loop | Loop disabled | Click 🔁 to enable |
Keyframe Issues
| Issue | Cause | Solution |
|---|
| Can't add keyframe | Object locked | Unlock object (🔒) |
| Keyframe not visible | Wrong zoom | Zoom out or use Fit All |
| Values not animating | Only one keyframe | Add second keyframe |
Zoom Issues
| Issue | Cause | Solution |
|---|
| Can't zoom more | At limit | Max is 64×, min is 0.25× |
| Lost position | Over-zoomed | Use "Fit All" to reset view |
| Timeline blank | Zoomed too far | Reset zoom with 0 key |
Best Practices
Timing
- Start simple — Add keyframes at start and end first
- Use easing — Linear motion looks robotic
- Overlap animations — Stagger starts for natural flow
- Preview often — Check timing at different speeds
Organization
- Name tracks — Use descriptive object names
- Collapse unused — Keep view clean
- Group related — Keyframes for complex animations
- Use scenes — Break long animations into scenes
- Limit keyframes — Use only what's needed
- Avoid micro-adjustments — Small changes add complexity
- Use appropriate zoom — Don't over-zoom for simple edits
- Close drawers — When not in use
Pro tip: Use the Curves drawer to fine-tune easing rather than adding extra keyframes for smooth acceleration/deceleration.
Summary
| Feature | Location | Purpose |
|---|
| Transport Bar | Top of timeline | Playback and zoom controls |
| Time Ruler | Below transport | Time scale and navigation |
| Playhead | On ruler | Current time position |
| Track List | Main area | Object and property tracks |
| Keyframes | On tracks | Animation values at time |
| Audio Lane | Below tracks | Audio visualization |
| Drawers | Right side | Advanced editing tools |
The Timeline is the heart of animation control in Scribe Animator. Master it to create precise, professional whiteboard animations with perfect timing.
Related Documentation:
- Scenes Guide — For multi-scene organization
- Audio & Sound Guide — For audio synchronization
- Typography Text Guide — For text animations
- Images & Vectors Guide — For image animations