Skip to main content
Version: 1.0 archive

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.

Current visual orientationโ€‹

The scene manager, canvas, and timeline share one project state. Selecting a scene changes the active editing context; it does not create a separate tutorial canvas.

Scribe Animator Desktop with two scenes in the scene manager and the playhead at the start of Scene 2
Two 15-second scenes produce a 30-second project; the second scene begins at global time 0:15.
Screenshot callouts
  1. Scene count
    The manager reports the number of ordered scenes in the current project.
  2. New Scene
    Creates a scene after the active scene, selects it, and seeks to its global start.
  3. Scene card
    Shows order, name, duration, object count, play action, and the more-actions menu.
  4. Incoming transition
    The transition control between cards configures the transition into the later scene.
  5. Active Scene 2
    The blue outline identifies the scene that receives new objects and edits.
  6. Global playhead at 0:15
    Scene-local 0:00 in Scene 2 maps to project-global 0:15.
Product UI and source verification

This capture and the marked controls were checked against the running Desktop editor with browser-based UI review on July 26, 2026. The header has no separate Share button, scene commands are exposed through cards rather than the unverified shortcut table that older docs showed, and transitions belong to the incoming scene. For exact create, rename, duplicate, reorder, duration, transition, template, reset, and Mobile Lite steps, follow Build with scenes and templates.

Application Layout Overviewโ€‹

Use the authentic annotated capture above as the layout reference.

AreaScene responsibility
Scene ManagerCreates, selects, orders, duplicates, renames, resets, and deletes scenes
CanvasShows and edits only the active scene's objects
TimelineMaps scene-local edits into project-global playback time
Transition controlConfigures the transition into the later scene
PlaybackPreviews the ordered scenes and their transitions as one project

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

  • A project owns the ordered scene list and project-wide settings.

  • Each scene owns its duration, objects, scene-level background override, camera state, and local timing.

  • A transition is stored as the incoming transition of the later scene.

  • Project-global time is calculated from the durations and transitions before the active scene.

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โ€‹

  1. Open Scenes in the left rail.
  2. Select New Scene.
  3. Confirm the new card is active and the playhead has moved to its global start.
  4. Add content to the canvas. New objects now belong to that scene.

Scene Manager Panelโ€‹

The real panel in the annotated capture exposes:

  • the current scene count;
  • New Scene;
  • an ordered card for each scene;
  • play, name, duration, object-count, and more-actions controls on each card;
  • an incoming-transition control between adjacent cards;
  • active-scene styling that identifies where edits will be applied.

Scene Card Anatomyโ€‹

Each scene in the manager shows key information at a glance.

Card elementPurpose
PlayStarts preview from that scene's global start
Scene nameIdentifies the section in the story
DurationSets how long the scene remains active
ThumbnailProvides a compact preview of the scene
Object countHelps detect unexpectedly empty or overloaded scenes
More actionsOpens rename, duplicate, duration, reset, template, and delete actions available in the current build

Card Informationโ€‹

ElementDescription
Play ButtonStart playback from this scene
TitleEditable scene name
ThumbnailVisual preview (auto-generated)
Object CountNumber of objects in scene
DurationScene length in seconds
MenuAdditional actions (rename, duplicate, delete)

Scene Operationsโ€‹

Creating Scenesโ€‹

MethodHow To
New Scene buttonClick [+ New Scene] in Scene Manager
DuplicateMenu (โ‹ฎ) โ†’ Duplicate Scene
KeyboardCtrl/โŒ˜ + Shift + N

Selecting Scenesโ€‹

Select a scene either from its Scene Manager card or from its scene region on the timeline. The selected scene becomes active, the canvas shows its content, and the global playhead seeks into its time range.

Reordering Scenesโ€‹

  1. Drag a scene card toward its new position.
  2. Use the insertion feedback to confirm the intended order.
  3. Release the card.
  4. Verify the card order, global scene ranges, transition ownership, and preview sequence.

Reordering changes project-global timing. Review audio, camera, and other time-sensitive content afterward.

Scene Menu Actionsโ€‹

The more-actions menu is build-dependent. In the current editor it can expose actions such as:

  • play from the scene;
  • rename or duplicate;
  • change duration;
  • create a scene template;
  • reset scene content;
  • delete the scene.

Use the visible menu as the source of truth. Do not assume an older Thumbnail Color action is still available.

ActionDescription
Play SceneStart playback from this scene
RenameChange scene title
DuplicateCreate a copy with all objects
Set DurationChange how long scene plays
Thumbnail ColorSet custom thumbnail background
Delete SceneRemove 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โ€‹

  1. Open the scene card's more-actions menu.
  2. Choose the duration action exposed by the current build.
  3. Enter a valid duration and confirm.
  4. Verify the card, timeline range, total project duration, and global playhead mapping.

Duration Guidelinesโ€‹

Content TypeRecommended Duration
Title slide3-5 seconds
Simple drawing5-10 seconds
Complex illustration10-20 seconds
Text-heavy contentCalculate by reading speed
Voiceover syncMatch audio length

Duration Validationโ€‹

RuleLimitError
Desktop minimum1 secondThe scene-manager control rejects shorter values
Desktop maximum30 secondsUse multiple scenes for a longer Desktop beat
Shared/Mobile Lite maximum60 secondsMobile Lite exposes the shared 1โ€“60 second range
Default new scene15 secondsAdjust it to narration and content
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โ€‹

TypeIconEffect 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โญ•Reveal the incoming scene through an expanding iris
Iris Close๐Ÿ”ดClose toward the incoming scene
Iris Openโญ•Circular opening reveal
Iris Close๐Ÿ”ดCircular closing reveal

Adding Transitionsโ€‹

  1. Select the transition control immediately before the later scene.
  2. Choose one of the transition types offered by the current picker.
  3. Set its duration when that control is available.
  4. Preview across the boundary and confirm that the transition belongs to the incoming scene.

Transition Durationโ€‹

Use the pickerโ€™s visible duration control rather than relying on an old fixed range. Very short values can look like a cut; long values consume more of the adjoining scene content. Preview the boundary after every change.

SettingRangeDefault
Desktop duration0.2โ€“2.0 seconds, 0.1-second step0.5 seconds
Stored easingease-in-out for a newly selected transitionThe current scene-manager picker does not expose a separate easing selector
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โ€‹

The timeline places scenes in project order and converts each scene's local time to a global range. In the authentic capture, Scene 2 starts at 0:15 because Scene 1 lasts 15 seconds. Transition regions sit at scene boundaries and affect the resulting total-time mapping.

Visual Indicatorsโ€‹

IndicatorMeaning
Blue highlightActive/selected scene
Playhead over sceneCurrently playing
T markerTransition between scenes
Gray barTransition duration

Scene Playbackโ€‹

Play Controlsโ€‹

ControlAction
โ–ถ PlayPlay entire project from current position
Scene โ–ถPlay from specific scene start
โธ PausePause playback
โน StopStop and return to start
โ† โ†’Navigate between scenes

Playing from a Sceneโ€‹

Select the card's play action to seek to that scene's global start and begin preview. Confirm the playhead time before evaluating audio, camera, or transition synchronization.


Scene Thumbnailsโ€‹

Visual previews help identify scenes quickly.

Auto-Generated Thumbnailsโ€‹

The manager derives a compact thumbnail from scene content. Treat it as navigation assistance, not a pixel-accurate export preview; small text and edge content may be reduced or cropped.

Custom Thumbnail Colorsโ€‹

Older builds exposed a custom thumbnail-color action. It is not shown in the verified current Scene Manager capture, so do not depend on it. Use meaningful scene names and visible scene content for reliable navigation.

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โ€‹

ModeIconWhen ActiveUI Behavior
Richโ€”Normal operationFull animations, smooth transitions
CompactโšกHigh scene countReduced animations
MinimalโšกโšกPerformance stressInstant transitions, minimal UI

The Scene Manager can simplify rendering as projects grow. The exact compact or adaptive indicator is build-dependent; the visible scene count and current manager behavior are authoritative. Simplification must not change project data or export output.

Performance Guidelinesโ€‹

Scene CountRecommended Actions
1-10No action needed
11-25Monitor performance
26-50Consider splitting into multiple projects
50+Split project, reduce complexity
tip

There is no documented 50-scene compatibility cutoff. Split a project when navigation, preview, narration, or export becomes difficult to reason aboutโ€”not because of an invented fixed threshold.


Keyboard behaviorโ€‹

Scene operations are intentionally discoverable from + New Scene, the scene card, and its โ‹ฏ menu. When renaming or editing duration, press Enter to commit and Escape to cancel. Do not rely on older, unverified global shortcuts for creating, deleting, duplicating, or renaming scenes.


Common Workflowsโ€‹

Workflow 1: Create Multi-Scene Projectโ€‹

  1. Open Scene Manager.
  2. Create the required scenes.
  3. Name them by story purpose.
  4. Add and verify content in each active scene.
  5. Add only the transitions the story needs.
  6. Preview the full project from the beginning.

Workflow 2: Storyboard Firstโ€‹

  1. Plan the story beats outside the editor.
  2. Create and name placeholder scenes in the intended order.
  3. Set approximate durations.
  4. Fill each scene with content and refine timing.

Workflow 3: Reorganize Existing Contentโ€‹

  1. Review the existing scene and identify natural story boundaries.
  2. Create shorter scenes and move or recreate the required content deliberately.
  3. Reorder the resulting cards.
  4. Recheck global audio, camera, and timing.
  5. Add transitions only after the new order is stable.

Troubleshootingโ€‹

Scene Not Visibleโ€‹

IssueCauseSolution
Objects missingWrong scene selectedClick correct scene in manager
Canvas blankScene has no contentAdd objects to the scene
Scene not in listAccidentally deletedUndo (Ctrl/โŒ˜ + Z) if recent

Transition Problemsโ€‹

IssueCauseSolution
No transition playingType set to "None"Change transition type
Transition too fastDuration too shortIncrease duration
Choppy transitionPerformance issueUse simpler transition type

Performance Issuesโ€‹

IssueCauseSolution
Slow scene switchingToo many scenesSplit into multiple projects
UI lagMany objectsReduce object count per scene
Thumbnail not updatingRender delayRefresh or wait a moment

Best Practicesโ€‹

Scene Organizationโ€‹

  1. Name scenes descriptively โ€” Use names like "Intro", "Problem", "Solution"
  2. Keep scenes focused โ€” One main concept per scene
  3. Consistent timing โ€” Similar scene types should have similar durations
  4. Use transitions purposefully โ€” Don't overuse; simpler is often better

Duration Guidelinesโ€‹

  1. Match content complexity โ€” More content = more time
  2. Consider reading speed โ€” ~150 words per minute for narration
  3. Build rhythm โ€” Vary durations to create pacing
  4. Leave breathing room โ€” Add 0.5-1s buffer at scene ends

Transition Tipsโ€‹

  1. Use crossfade for related content โ€” Smooth topic continuation
  2. Use cuts for dramatic changes โ€” Hard breaks between sections
  3. Match transition to mood โ€” Fast for energy, slow for calm
  4. 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โ€‹

FeatureLocationPurpose
Scene ManagerLeft Sidebar โ†’ ๐ŸŽฌ ScenesCreate and manage scenes
Scene CardsScene Manager PanelVisual scene overview
TransitionsBetween scene cardsAdd effects between scenes
Timeline ViewBottom TimelineSee scene timing
Duration ControlScene Menu โ†’ Set DurationControl 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