Scenes - Complete Guide
Scenes - Complete Guide
Learn how to organize your whiteboard animation into multiple scenes in Scribe Animator. This guide covers scene creation, management, transitions, and best practices for effective storytelling.
Application Layout Overview
┌─────────────────────────────────────────────────────────────────────────────┐
│ HEADER BAR │
│ [File] [Edit] [View] [Export] [Share] [?] │
├────────────┬────────────────────────────────────────────────────────────────┤
│ │ │
│ LEFT │ CANVAS AREA │
│ SIDEBAR │ │
│ │ ┌─────────────────────────────────┐ │
│ ┌────────┐ │ │ │ │
│ │ 📚 │ │ │ Current Scene Content │ │
│ │ Assets │ │ │ │ │
│ ├────────┤ │ │ [Objects, text, images │ │
│ │ 🖼️ │ │ │ for the active scene] │ │
│ │ Images │ │ │ │ │
│ ├────────┤ │ └─────────────────────────────────┘ │
│ │ 🎬 │◄├─── Scene Manager Access │
│ │ Scenes │ │ │
│ ├────────┤ │ │
│ │ 🎵 │ │ │
│ │ Audio │ │ │
│ └────────┘ │ │
│ │ │
├────────────┴────────────────────────────────────────────────────────────────┤
│ TIMELINE │
│ ┌─────────────────────────────────────────────────────────────────────────┐│
│ │[Scene 1 ][ ⟷ ][Scene 2 ][ ⟷ ][Scene 3 ] ││
│ │ 5s │trans │ 8s │trans │ 6s ││
│ └─────────────────────────────────────────────────────────────────────────┘│
│ [▶️ Play] ════════════════════════════════════════════════ [00:00 / 00:19] │
└─────────────────────────────────────────────────────────────────────────────┘
Scene Management Access:
- Left Sidebar → 🎬 Scenes — Open Scene Manager panel
- Timeline → Scene Track — View and select scenes
- Timeline → Scene Gaps — Add/edit transitions between scenes
What Are Scenes?
Scenes are the building blocks of your animation project. Each scene contains:
- Objects — Text, images, SVGs, shapes on the canvas
- Duration — How long the scene plays
- Transition — How it transitions from the previous scene
- Background — Individual scene background settings
Project Structure:
─────────────────────────────────────────────────
┌─────────────────────────────────────────────────────────────────────────────┐
│ PROJECT │
│ │
│ ┌───────────────┐ ┌───────────────┐ ┌───────────────┐ │
│ │ SCENE 1 │ │ SCENE 2 │ │ SCENE 3 │ │
│ │ │ │ │ │ │ │
│ │ • Objects │ │ • Objects │ │ • Objects │ │
│ │ • Duration │ │ • Duration │ │ • Duration │ │
│ │ • Background │ │ • Background │ │ • Background │ │
│ │ │ │ │ │ │ │
│ └───────────────┘ └───────────────┘ └───────────────┘ │
│ │ │ │ │
│ └─────────┬─────────┴─────────┬─────────┘ │
│ │ │ │
│ [Transition] [Transition] │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
tip
Think of scenes like slides in a presentation — each scene tells part of your story, and transitions create smooth connections between them.
Quick Start: Creating Scenes
Create Your First Scene
Step 1 Step 2 Step 3
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Click 🎬 │ │ Click │ │ Add content │
│ Scenes icon │ ───► │ [+ New Scene]│ ───► │ to the new │
│ in sidebar │ │ button │ │ scene │
└──────────────┘ └──────────────┘ └──────────────┘
Scene Manager Panel
┌─────────────────────────────────────────────────────────────┐
│ Scenes [3] [⧉] │
├─────────────────────────────────────────────────────────────┤
│ │
│ [+ New Scene] │
│ │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ [▶] Scene 1 5s [⋮] │ │
│ │ ████████████████████████████████████ │ │
│ │ 3 objects │ │
│ └───────────────────────────────────────────────────────┘ │
│ [⟷ Crossfade 0.5s] │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ [▶] Scene 2 ◄── Active 8s [⋮] │ │
│ │ ████████████████████████████████████████ │ │
│ │ 7 objects │ │
│ └───────────────────────────────────────────────────────┘ │
│ [⟷ Fade 1s] │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ [▶] Scene 3 6s [⋮] │ │
│ │ ████████████████████████████████████ │ │
│ │ 5 objects │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────────────┤
│ Total: 00:19 · 3 scenes · 15 objects │
└─────────────────────────────────────────────────────────────┘
Scene Card Anatomy
Each scene in the manager shows key information at a glance.
Scene Card Layout:
─────────────────────────────────────────────────
┌─────────────────────────────────────────────────────────────┐
│ [▶] Scene Title Duration [⋮] │
│ │ │ │ │
│ │ ████████████████████████████████ │ │ │
│ │ │ │ │ │
│ │ │ │ │ │
│ │ X objects │ │ └── Menu│
│ │ │ │ │ │
│ │ │ └── Thumbnail └── Time (5s) │
│ │ │ │
│ │ └── Object count │
│ │ │
│ └── Play from this scene │
└─────────────────────────────────────────────────────────────┘
Card Information
| Element | Description |
|---|---|
| Play Button | Start playback from this scene |
| Title | Editable scene name |
| Thumbnail | Visual preview (auto-generated) |
| Object Count | Number of objects in scene |
| Duration | Scene length in seconds |
| Menu | Additional actions (rename, duplicate, delete) |
Scene Operations
Creating Scenes
| Method | How To |
|---|---|
| New Scene button | Click [+ New Scene] in Scene Manager |
| Duplicate | Menu (⋮) → Duplicate Scene |
| Keyboard | Ctrl/⌘ + Shift + N |
Selecting Scenes
Click Scene Card Timeline Click
───────────────────────── ─────────────────────────
┌─────────────────────┐ ═════════════════════════
│ Scene 1 │ [Scene 1][Scene 2][Scene 3]
│ ████████████ │ ▲
│ │ │
│ Click anywhere │ Click scene block on timeline
└─────────────────────┘ ═════════════════════════
│
▼
Scene becomes active
Canvas shows scene content
Reordering Scenes
Drag and Drop:
─────────────────────────────────────────────────
Before: After:
┌───────────────┐ ┌───────────────┐
│ Scene 1 │ │ Scene 1 │
└───────────────┘ └───────────────┘
┌───────────────┐ ┌───────────────┐
│ Scene 2 ◄────┼─ Drag │ Scene 3 │ ◄─ Moved up
└───────────────┘ └───────────────┘
┌───────────────┐ ┌───────────────┐
│ Scene 3 │ │ Scene 2 │ ◄─ Moved down
└───────────────┘ └───────────────┘
Scene Menu Actions
Scene Menu (⋮):
─────────────────────────────────────────────────
┌─────────────────────────────────────────────────────────────┐
│ Scene 2 [⋮] │
│ │ │
│ ┌───────────┴───────┐ │
│ │ ▶ Play Scene │ │
│ │ ✏️ Rename │ │
│ │ 📋 Duplicate │ │
│ │ ⏱ Set Duration │ │
│ │ 🎨 Thumbnail Color │ │
│ │ ───────────────── │ │
│ │ 🗑 Delete Scene │ │
│ └───────────────────┘ │
└─────────────────────────────────────────────────────────────┘
| Action | Description |
|---|---|
| Play Scene | Start playback from this scene |
| Rename | Change scene title |
| Duplicate | Create a copy with all objects |
| Set Duration | Change how long scene plays |
| Thumbnail Color | Set custom thumbnail background |
| Delete Scene | Remove scene from project |
warning
Deleting a scene permanently removes all objects in that scene. This action cannot be undone.
Scene Duration
Control how long each scene plays in your animation.
Setting Duration
Duration Options:
─────────────────────────────────────────────────
Method 1: Scene Menu Method 2: Direct Edit
┌─────────────────────┐ ┌─────────────────────┐
│ ⋮ → Set Duration │ │ Scene 1 [5s] │
│ │ │ │ │
│ ┌─────────────────┐ │ │ Click ─┘ │
│ │ Duration: [8 ]│ │ │ │
│ │ seconds │ │ │ Type new duration │
│ └─────────────────┘ │ └─────────────────────┘
└─────────────────────┘
Duration Guidelines
| Content Type | Recommended Duration |
|---|---|
| Title slide | 3-5 seconds |
| Simple drawing | 5-10 seconds |
| Complex illustration | 10-20 seconds |
| Text-heavy content | Calculate by reading speed |
| Voiceover sync | Match audio length |
Duration Validation
| Rule | Limit | Error |
|---|---|---|
| Minimum | 0.5 seconds | "Scene too short" |
| Maximum | 600 seconds (10 min) | "Scene too long" |
| Default | 5 seconds | — |
tip
For voiceover sync, set scene duration slightly longer than the audio to avoid cutoffs.
Scene Transitions
Add professional transitions between scenes for smooth storytelling.
Transition Types
| Type | Icon | Effect Description |
|---|---|---|
| None (Cut) | ✂️ | Instant switch, no animation |
| Fade to Black | 🌑 | Fade out to black, fade in |
| Crossfade | 🔀 | Dissolve/blend between scenes |
| Wipe Left | ◀️ | New scene wipes from right |
| Wipe Right | ▶️ | New scene wipes from left |
| Wipe Up | 🔼 | New scene wipes from bottom |
| Wipe Down | 🔽 | New scene wipes from top |
| Slide Left | ⬅️ | New scene slides from right |
| Slide Right | ➡️ | New scene slides from left |
| Slide Up | ⬆️ | New scene slides from bottom |
| Slide Down | ⬇️ | New scene slides from top |
| Zoom In | 🔍 | Zoom into new scene |
| Zoom Out | 🔎 | Zoom out to new scene |
| Iris Open | ⭕ | Circular opening reveal |
| Iris Close | 🔴 | Circular closing reveal |
Adding Transitions
Step 1: Click Transition Indicator Step 2: Select Type
──────────────────────────────── ────────────────────────────────
┌─────────────────────────────┐ ┌─────────────────────────────┐
│ Scene 1 │ │ Scene 1 │
└─────────────────────────────┘ └─────────────────────────────┘
[⟷] ◄── Click here [⟷]
│ │
│ ┌──────────┴──────────┐
▼ │ ✂️ None (Cut) │
Opens transition picker │ 🌑 Fade to Black │
│ 🔀 Crossfade ◄── │
│ ◀️ Wipe Left │
│ ... more options ... │
└─────────────────────┘
┌─────────────────────────────┐ ┌─────────────────────────────┐
│ Scene 2 │ │ Scene 2 │
└─────────────────────────────┘ └─────────────────────────────┘
Transition Duration
Transition Duration Control:
─────────────────────────────────────────────────
┌─────────────────────────────────────────────────────────────┐
│ Transition: Crossfade │
│ │
│ Duration: ────────●────────── 0.5s │
│ 0.1s 1.0s │
│ │
│ Easing: [Ease In-Out ▼] │
└─────────────────────────────────────────────────────────────┘
| Setting | Range | Default |
|---|---|---|
| Duration | 0.1 - 3.0 seconds | 0.5 seconds |
| Easing | Linear, Ease In, Ease Out, Ease In-Out | Ease In-Out |
Transition Easing
| Easing | Description |
|---|---|
| Linear | Constant speed |
| Ease In | Starts slow, ends fast |
| Ease Out | Starts fast, ends slow |
| Ease In-Out | Slow start and end (smoothest) |
| Ease In Cubic | More dramatic ease in |
| Ease Out Cubic | More dramatic ease out |
| Ease In-Out Cubic | Most dramatic smooth curve |
note
Transitions happen at the start of a scene (transitioning INTO that scene from the previous one). Scene 1 cannot have an incoming transition since there's no scene before it.
Timeline Scene View
Scenes are displayed on the timeline for visual editing.
Timeline Scene Track
Timeline Scene Track:
─────────────────────────────────────────────────
Time: 0s 5s 10s 15s 20s
│ │ │ │ │
▼ ▼ ▼ ▼ ▼
┌──────────────┬─┬─────────────────┬─┬────────────────┐
│ Scene 1 │T│ Scene 2 │T│ Scene 3 │
│ 5.0s │ │ 8.0s │ │ 6.0s │
└──────────────┴─┴─────────────────┴─┴────────────────┘
▲ ▲
│ │
Transition Transition
0.5s 1.0s
Visual Indicators
| Indicator | Meaning |
|---|---|
| Blue highlight | Active/selected scene |
| Playhead over scene | Currently playing |
| T marker | Transition between scenes |
| Gray bar | Transition duration |
Scene Playback
Play Controls
| Control | Action |
|---|---|
| ▶ Play | Play entire project from current position |
| Scene ▶ | Play from specific scene start |
| ⏸ Pause | Pause playback |
| ⏹ Stop | Stop and return to start |
| ← → | Navigate between scenes |
Playing from a Scene
Method 1: Scene Card Button Method 2: Double-Click
───────────────────────── ─────────────────────────
┌─────────────────────┐ ┌─────────────────────┐
│ [▶] Scene 2 │ │ Scene 2 │
│ │ │ │ │
│ └── Click play │ │ Double-click card │
└─────────────────────┘ └─────────────────────┘
│ │
▼ ▼
Playback starts Playback starts
from Scene 2 start from Scene 2 start
Scene Thumbnails
Visual previews help identify scenes quickly.
Auto-Generated Thumbnails
Thumbnail Generation:
─────────────────────────────────────────────────
Canvas Content Thumbnail Preview
┌─────────────────────────┐ ┌──────────┐
│ │ │ │
│ ⭐ Hello! │ ───► │ ⭐ Hello │
│ │ │ │
└─────────────────────────┘ └──────────┘
Full canvas view Scaled preview
Custom Thumbnail Colors
Thumbnail Color Options:
─────────────────────────────────────────────────
┌─────────────────────────────────────────────────────────────┐
│ 🎨 Thumbnail Color │
│ │
│ [⬜] White [🔵] Blue [🟢] Green [🟡] Yellow │
│ [🟠] Orange [🔴] Red [🟣] Purple [⬛] Black │
│ │
│ Custom: [#______] [🎨] │
└─────────────────────────────────────────────────────────────┘
tip
Use color coding to organize scenes by type — e.g., blue for intro scenes, green for content, red for calls-to-action.
Performance Modes
The Scene Manager adapts to system performance automatically.
Adaptive UI Modes
| Mode | Icon | When Active | UI Behavior |
|---|---|---|---|
| Rich | — | Normal operation | Full animations, smooth transitions |
| Compact | ⚡ | High scene count | Reduced animations |
| Minimal | ⚡⚡ | Performance stress | Instant transitions, minimal UI |
Performance Indicator:
─────────────────────────────────────────────────
┌─────────────────────────────────────────────────────────────┐
│ Scenes [12] ⚡ [⧉] │
│ │ │ │
│ │ └── Compact mode│
│ │ │
│ └── Scene count│
└─────────────────────────────────────────────────────────────┘
Performance Guidelines
| Scene Count | Recommended Actions |
|---|---|
| 1-10 | No action needed |
| 11-25 | Monitor performance |
| 26-50 | Consider splitting into multiple projects |
| 50+ | Split project, reduce complexity |
warning
Projects with 50+ scenes may experience slower performance. Consider breaking large projects into parts.
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
Ctrl/⌘ + Shift + N | Create new scene |
Delete / Backspace | Delete selected scene |
Ctrl/⌘ + D | Duplicate selected scene |
← / → | Navigate between scenes |
Home | Go to first scene |
End | Go to last scene |
Enter | Play from selected scene |
F2 | Rename selected scene |
Common Workflows
Workflow 1: Create Multi-Scene Project
Step 1 Step 2 Step 3 Step 4
┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Open Scene │ │ Create │ │ Add content │ │ Add │
│ Manager │ ───► │ new scenes │ ───► │ to each │ ───► │ transitions │
│ (🎬) │ │ (+ button) │ │ scene │ │ between them │
└──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘
Workflow 2: Storyboard First
Step 1 Step 2 Step 3
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Plan scenes │ │ Create empty │ │ Fill in │
│ on paper or │ ───► │ scenes with │ ───► │ content for │
│ digitally │ │ placeholder │ │ each scene │
│ │ │ names │ │ │
└──────────────┘ └──────────────┘ └──────────────┘
Workflow 3: Reorganize Existing Content
Step 1 Step 2 Step 3
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Review │ │ Split long │ │ Reorder and │
│ current │ ───► │ scenes into │ ───► │ add smooth │
│ scene │ │ shorter ones │ │ transitions │
└──────────────┘ └──────────────┘ └──────────────┘
Troubleshooting
Scene Not Visible
| Issue | Cause | Solution |
|---|---|---|
| Objects missing | Wrong scene selected | Click correct scene in manager |
| Canvas blank | Scene has no content | Add objects to the scene |
| Scene not in list | Accidentally deleted | Undo (Ctrl/⌘ + Z) if recent |
Transition Problems
| Issue | Cause | Solution |
|---|---|---|
| No transition playing | Type set to "None" | Change transition type |
| Transition too fast | Duration too short | Increase duration |
| Choppy transition | Performance issue | Use simpler transition type |
Performance Issues
| Issue | Cause | Solution |
|---|---|---|
| Slow scene switching | Too many scenes | Split into multiple projects |
| UI lag | Many objects | Reduce object count per scene |
| Thumbnail not updating | Render delay | Refresh or wait a moment |
Best Practices
Scene Organization
- Name scenes descriptively — Use names like "Intro", "Problem", "Solution"
- Keep scenes focused — One main concept per scene
- Consistent timing — Similar scene types should have similar durations
- Use transitions purposefully — Don't overuse; simpler is often better
Duration Guidelines
- Match content complexity — More content = more time
- Consider reading speed — ~150 words per minute for narration
- Build rhythm — Vary durations to create pacing
- Leave breathing room — Add 0.5-1s buffer at scene ends
Transition Tips
- Use crossfade for related content — Smooth topic continuation
- Use cuts for dramatic changes — Hard breaks between sections
- Match transition to mood — Fast for energy, slow for calm
- Keep durations consistent — Usually 0.3-0.8 seconds
tip
Pro tip: Use "Fade to Black" transitions to create chapter breaks in longer animations.
Summary
| Feature | Location | Purpose |
|---|---|---|
| Scene Manager | Left Sidebar → 🎬 Scenes | Create and manage scenes |
| Scene Cards | Scene Manager Panel | Visual scene overview |
| Transitions | Between scene cards | Add effects between scenes |
| Timeline View | Bottom Timeline | See scene timing |
| Duration Control | Scene Menu → Set Duration | Control scene length |
Scenes are the foundation of organized whiteboard animations. Use them to structure your story, control timing, and create professional transitions between ideas.
Related Documentation:
- Typography Text Guide — For adding text to scenes
- Images & Vectors Guide — For visual content
- Audio & Sound Guide — For scene-synced audio
- Background & Canvas Settings — For scene backgrounds